2016-07-29 4 views
0

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!Wie werden die Buchstaben bei Google Chrome beim Suchen nach einem Text gelb?

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?

+1

Für Suchergebnis wird Tag 'MARK' reserviert, die automatisch gleiche Farbe wie Standard-Suchergebnisse (definiert durch O Thema) haben sollten. ' hallo'. Aber das wird normalerweise von Server oder JS verwendet, nicht vom Browser oder seinen Erweiterungen. –

+1

Siehe auch mark.js-Bibliothek. – wOxxOm

+0

Sie können vollständig erklärten Code in [hilitor.js] finden (http://www.the-art-of-web.com/javascript/search-highlight/) –

Antwort

0

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

+0

Ich weiß das und ich ersetze meinen Text so wie ich habe erklärt. Ich würde gerne wissen, wie die native Highlight-Methode funktioniert. – locknies

+0

@KRIZTE Sie sollten diese Frage mit dem Schlüsselwort 'google-chrome-extension' anstelle von' javascript' markieren. –

+0

@KRIZTE, der Browser tut es intern im Renderer und es gibt keine API dafür. Es wurde zuvor auf stackoverflow gefragt. – wOxxOm

Verwandte Themen