Wie kann jquery verwendet werden, um das Such-Keyword in den Suchergebnissen hervorzuheben?

-1

zum Beispiel gibt es in den Suchergebnissen folgende html, und die aa ist das Stichwort:Wie kann jquery verwendet werden, um das Such-Keyword in den Suchergebnissen hervorzuheben?

<body> 
<div> 
    <h2><a href="#aa">aabbcc</a></h2> 
</div> 
<div> 
    <h2><a href="#bb">aaeeedd</a></h2> 
</div> 
<div> 
    <h2><a href="#cc">vvaapp</a></h2> 
</div> 
</body>

ich die Suche Stichwort aa in Ergebnissen hervorheben mag und nicht etwas anderes ändern: ich dies versuchen:

var text = $('body').html().replace(new RegExp('aa','gim'),"<span class='highlight'>aa</span>"); 
$('body').html(text);

Aber alle HTML wurden ersetzt, einschließlich der href '#aa'. Ich denke, verwenden Sie die each() und text() vielleicht ok. Und gibt es eine bessere Lösung?

Quelle

2016-10-29 邱文强

Verwendung '.text()', wenn Text nur – guradio

@guradio Ich denke, es ist keine gute Idee ist '.text zu verwenden()' und Ersetzen von Text dann Textausgabe Körper anwenden !! –

Sie möchten den Text von "aa" durch den Text "bb" durch das ganze Dokument ersetzen? Als Antwort auf welches Ereignis? –

-1

Ihre beste off mit text.textContent() Sein leichter Erinnern Sie sich noch JQuery und JS sofort

Quelle

2016-10-29 03:01:15

$('div a').each(function() { 
 
    var text = $(this).text(); 
 
    $(this).text(text.replace('aa', 'bb')); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div> 
 
    <h2><a href="#aa">aabbcc</a></h2> 
 
    </div> 
 
    <div> 
 
    <h2><a href="#bb">aaeeedd</a></h2> 
 
    </div> 
 
    <div> 
 
    <h2><a href="#cc">vvaapp</a></h2> 
 
    </div> 
 
</body>

ersetzen Verwendung und .text()

$('div a').each(function() { 
 
    var text = $(this).text(); 
 
    $(this).text(text.replace(/[aa]+/g, "bb")); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div> 
 
    <h2><a href="#aa">aabbcc</a></h2> 
 
    </div> 
 
    <div> 
 
    <h2><a href="#bb">aaeeedd</a></h2> 
 
    </div> 
 
    <div> 
 
    <h2><a href="#cc">vvaapp</a></h2> 
 
    </div> 
 
</body>

verwenden können

Verwendung von Regex

Quelle

2016-10-29 03:03:17 guradio

Mai Regex verwenden wird besser sein. Es kann ersetzen mehrere Vorkommen. –

@Reddy überprüfen Update – guradio

Die HTML ist nur ein Beispiel, vielleicht komplizierter in der tatsächlichen. Ich möchte nur ein Container-Div auswählen, dann wird der Inhalt komplett ersetzt. Ist '.each()' und '.text()' erforderlich? –

-1

Ich habe eine Funktion gefunden, um es zu lösen! Und es funktioniert gut!

//highlight the search keyword 
function highlight($area,keyword) { 
    var re = new RegExp("(" + keyword + ")(?=[^<>]*<)","gi"); 
    var html = $area.html().replace(re, '<span class="searchkeyword">$1</span>'); 
    $area.html(html); 
} 

highlight($('body'), 'aa');

Quelle

2016-10-29 06:27:06

$('#filter').on('keyup', function(event) { 
 
    var keyword = event.currentTarget.value; 
 
    highlight('a', keyword); 
 
}); 
 

 
function highlight(selector, keyword) { 
 
    $(selector).each(function(index, element) { 
 
    var $element = $(element); 
 
    var original = $element.data('originalText'); 
 
    if (original == undefined) { 
 
     original = $element.html(); 
 
     $element.data('originalText', original); 
 
    } 
 
    $element.html(original.replace(keyword, '<span class="highlight">' + keyword + '</span>')); 
 
    }); 
 
}

.highlight { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <input type="text" id="filter"/> 
 
    <div> 
 
    <h2><a href="#aa">aabbcc</a></h2> 
 
    </div> 
 
    <div> 
 
    <h2><a href="#bb">aaeeedd</a></h2> 
 
    </div> 
 
    <div> 
 
    <h2><a href="#cc">vvaapp</a></h2> 
 
    </div> 
 
</body>

Quelle

2016-10-29 07:20:51

Danke für Ihre Codierung!Aber ich kann nur ein Container-Tag auswählen, das möglicherweise viele verschiedene Tags enthält das Schlüsselwort nicht nur '' mit RegExp und es brauchen nicht '.each()', suchen Sie nach meinem Code in Antwort. –

Wie kann jquery verwendet werden, um das Such-Keyword in den Suchergebnissen hervorzuheben?

Antwort

Verwandte Themen