搜索文本時，Google Chrome瀏覽器中的字母如何變爲黃色？

當我按Ctrl + F在鉻中查找單詞時，所有帶有搜索文字的字母都變成黃色。任何人都知道它是如何完成的？我只是想知道這一點！搜索文本時，Google Chrome瀏覽器中的字母如何變爲黃色？

順便說一句，我搜索這個是使用谷歌擴展實現這樣的功能。現在正在做的是找到那個特定的文本，並用下面的東西代替它。

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

任何想法？

來源

2016-07-29 locknies

對於搜索結果被保留標籤'MARK'應該自動具有相同的顏色的默認搜索結果（由OS主題定義）。 '你好'。但是這通常由服務器或JS使用，而不是瀏覽器或其擴展。 –

另請參見mark.js庫。 – wOxxOm

你可以在[hilitor.js]（http://www.the-art-of-web.com/javascript/search-highlight/）找到完全解釋的代碼 –

編輯：我認爲瀏覽器不允許你使用原生higlight 機制。但是你可以使用 Javascript/jQuery來模仿這個功能。

有很多JavaScript和jQuery插件來做到這一點。總體思路是找出給定單詞的所有出現，並用一些HTML代碼替換它們。（具有不同的背景顏色或更大的字體大小等）對於查找替換操作，RegEx將會有所幫助。

基本，未優化示例;

/* 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

來源

2016-07-29 06:58:24

我知道這一點，我替換我的文字就像這樣喜歡我已經解釋。我想知道原生高亮方法的工作原理。 – locknies

@KRIZTE你應該用'google-chrome-extension'關鍵字代替'javascript'來標記這個問題。 –

@KRIZTE，瀏覽器在渲染器內部執行它，並且沒有API。之前在stackoverflow上詢問過它。 – wOxxOm

搜索文本時，Google Chrome瀏覽器中的字母如何變爲黃色？

回答

相關問題