查找包含與正則表達式匹配的字符串的DOM元素

我需要在HTML頁面上找到匹配特定正則表達式的所有文本片段（也就是說，我需要忽略標籤以便'First name: John'匹配'First name: John'），並突出顯示這些找到的片段裝飾新的元素和應用自定義CSS樣式），並能夠找到這些片段，例如能夠將這些視圖滾動到視圖中。功能與Skype瀏覽器插件使用頁面上的電話號碼相似。查找包含與正則表達式匹配的字符串的DOM元素

來源

2011-10-12 Igor Romanov

你有沒有工作的代碼，或者這是一個「給我一個codez」的問題？你有什麼嘗試？ – CanSpice

我需要找到方法，我可以做編碼。如果它已經解決並且代碼可用 - 甚至更好。 –

看來jQuery可以用with：contains（）選擇器來做到這一點。也許它的邏輯可以重新定義爲使用正則表達式搜索，而不是子字符串搜索。 –

-1

你有沒有嘗試這樣的事情？

document.body.innerHTML.replace(/<\/?[^>]+>/g, '')

來源

2011-10-12 22:21:36 Mic

這不僅會破壞已動態添加的每個偵聽器，而且可能會在不同瀏覽器中以不同方式將元素，屬性和屬性搞亂，從而導致任何頁面內容不平凡。 – RobG

我需要保留DOM中搜索結果所在位置的信息，或者我可以執行document.body.innerText.match（） - 而不是我需要的信息。 –

您可以遞歸走在DOM查看元素的textContent或的innerText財產（如適用），或者你可以使用循環通過以上的getElementsByTagName 返回集合。無論哪種方式，一旦你確定了文本和父元素，你需要弄清楚如何替換它。

如果字符串拆分爲一個或多個othere元素什麼是你在更換文檔結構的要求？

來源

2011-10-12 23:06:22 RobG

我認爲使用以節點爲中心的方法與以字符串爲中心的方法會產生更多的可移植性。此外，這是大多數人遇到麻煩的方面:)。 – 2011-10-12 23:10:06

是的，但OP希望字符串即使分成多個元素，所以只看文本節點也不行。我不知道他打算如何處理拆分字符串，但至少上面的方法會找到具有整個字符串的最接近的祖先。 – RobG

你可以使用jQuery selectors獲取包含John的標籤包含First name:一個標籤後而來，然後例如應用樣式：

$("span:contains('First name:') ~ b:contains('John')").css('color','red');

這裏是一個正在運行的例子：http://jsfiddle.net/XzwNj/

來源

2011-10-12 23:37:59 etuardu

這只是一個例子，而不是具體的例子 –

查找包含與正則表達式匹配的字符串的DOM元素

回答

相關問題