Wie werden die Buchstaben bei Google Chrome beim Suchen nach einem Text gelb?

Question

Wenn ich drücken Sie Strg + F Worte in Chrom alle Buchstaben mit dem Suchtext wird gelb zu finden. Hat jemand eine Idee, wie es gemacht wird? Bin nur neugierig, das zu wissen!

BTW Ich bin für diese Suche ist eine Funktionalität wie diese mit Google Erweiterungen zu implementieren. Im Moment suche ich den bestimmten Text und ersetze ihn durch etwas wie unten.

Original text: hello 
Replaced text: '<span style="background:yellow;">hello</span>'; 

Irgendwelche Ideen?

Answer 1

Edit: Ich denke, Browser erlauben Ihnen nicht, native Higlight Mechanismus zu verwenden. Aber Sie können diese Funktionalität mit Javascript/jQuery nachahmen.

Es gibt viele Javascript und jQuery Plugins, um das zu tun. Allgemeine Idee ist, alle Vorkommen der gegebenen Wörter zu finden und sie durch irgendeinen HTML-Code zu ersetzen. (Die haben eine andere Hintergrundfarbe oder eine größere Schriftgröße, etc.) Für Suchen-Ersetzen-Operationen ist RegEx von Vorteil.

Basic, nicht optimierten Beispiel;

/* Instead of body you can use any container element's selector */ 
$('body').each(function(){ 
    var allContent = $(this).text(); 
    var wordsToBeHighlighted = ['Hello','World']; 
    wordsToBeHighlighted = $.map(wordsToBeHighlighted, function(str) { 
     return preg_quote(str); 
    }); 
    $(this).html(allContent.replace(new RegExp("(" + wordsToBeHighlighted.join('|') + ")" , 'gi'), "<b style='color: red;'>$1</b>")); 
}); 

function preg_quote(str) { 
    return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1"); 
} 

Source