找一個網頁上的單詞，並添加一個跨度到它

我一直在努力尋找一個詞，並添加一個跨度爲了給它一些樣式和功能，我找到了一種方法這個，但它不是很有效。找一個網頁上的單詞，並添加一個跨度到它

我有一個內容腳本正在搜索單詞searching，然後我用關鍵字的添加範圍替換innerHTML。

這是我的JS文件：

function getText(){ 
return document.body.innerText 
} 
if(getText().indexOf("searching") > -1) { 
    document.body.innerHTML = document.body.innerHTML.replace(new RegExp("searching", "g"),"<span class='spanDetected' id='spanDetected'>"+ 
    'searching'+"</span>"); 
    console.log("true"); 
}

這就是結局是什麼：

所以它似乎在一定程度上工作，但隨後出現的問題是它也改變URLS和文本框，如下所示：

什麼是更好的樣式和添加功能的方式單詞？

來源

2015-05-02 Katie

這個問題可能有你的答案： http://stackoverflow.com/questions/4489119/jquery-javascript-search-dom-for-text-and-insert-html –

不要給相同的id '給你添加的每一個標籤。這不是正確的HTML。 – Teepeemm

使用Regex解析[X] HTML是terrible idea。想象一下下面的HTML：

<div id="searching">A searching inspection</div>

你的程序將取代短語'searching'，這是不是你想要的兩個實例。您需要解析頁面並智能地替換節點。也許忽略鏈接或使用超鏈接節點

覆蓋DIV你有兩個選擇：

遍歷所有節點遞歸。
使用XPath來選擇包含特定文本的節點。

像這樣的東西可以讓你所有包含短語'searching'的節點。

//text()[contains(., 'searching')]

然後，您可以循環遍歷所有節點並替換您想要的節點。既然你正在開發一個Chrome擴展可以使用$x得到滿足您的XPath條件節點的數組：

$x("//text()[contains(., 'searching')]")

閱讀this answer學習如何通過數組中的項目循環。

來源

2015-05-02 01:53:40 bman

那麼我的最終目標是在儘可能快的時間內搜索超過10,000個單詞，所以我不確定哪種方法是最有效的。 – Katie

正則表達式速度更快，但它不管*努力嘗試。 X [HTML]不是您使用正則表達式解析這些類型的文本。 – bman

感謝您的編輯。我從來沒有真正使用過xpath，所以我怎麼實現它來查看'innerHTML'的內部來查看它是否包含一個單詞？ – Katie

找一個網頁上的單詞，並添加一個跨度到它

回答

相關問題