如何在html元素中包裝所有text_node nodeValue的一部分？

Question

我正在迭代html文檔中的所有文本節點，以包圍具有特定范圍的一些單詞。

更改nodeValue不允許我插入html。 span轉義為以純文本顯示，我不希望這樣。

這是我到目前為止：

 var elements = document.getElementsByTagName('*'); for (var i = 0; i < elements.length; i++) { var element = elements[i]; for (var j = 0; j < element.childNodes.length; j++) { var node = element.childNodes[j]; if (node.nodeType === Node.TEXT_NODE) { node.nodeValue = node.nodeValue.replace(/Questions/, "<span>Questions</span>"); } } } 

 <p>Questions1</p> <p>Questions 2</p> <p>Questions 3</p> <p>Questions 4</p> 

Answer 1

我認為你需要遞歸所有的DOM和每場比賽...看看這里：

 function replacer(node, parent) { var r = /Questions/g; var result = r.exec(node.nodeValue); if(!result) { return; } var newNode = this.createElement('span'); newNode.innerHTML = node .nodeValue .replace(r, '<span class="replaced">$&</span>') ; parent.replaceChild(newNode, node); } document.addEventListener('DOMContentLoaded', () => { function textNodesIterator(e, cb) { if (e.childNodes.length) { return Array .prototype .forEach .call(e.childNodes, i => textNodesIterator(i, cb)) ; } if (e.nodeType == Node.TEXT_NODE && e.nodeValue) { cb.call(document, e, e.parentNode); } } document .getElementById('highlight') .onclick = () => textNodesIterator( document.body, replacer ); }); 

 .replaced {background: yellow; } .replaced .replaced {background: lightseagreen; } .replaced .replaced .replaced {background: lightcoral; } 

 <button id="highlight">Highlight</button> <hr> <p>Questions1</p> <p>Questions 2</p> <p>Questions 3</p> <p>Questions 4</p> <p>Questions 5 Questions 6</p> <div> <h1>Nesting</h1> Questions <strong>Questions 4</strong> <div> Questions <strong>Questions 4</strong></div> <div> Questions <strong>Questions 4</strong> <div> Questions <strong>Questions 4</strong></div> </div> </div> 

Answer 2

最后，我可以做到這一點，而不需要額外的標記，除了所需的跨度：

更新

的jsfiddle

 var elements = document.body.getElementsByTagName('*');; for (var i = 0; i < elements.length; i++) { var element = elements[i]; for (var j = 0; j < element.childNodes.length; j++) { var node = element.childNodes[j], par = node.parentElement; // as well as checking the nodeType as text, we make sure the // parent element doesn't have the class "foo", so that we only // wrap the keyword once, instead of being in a loop to infinity if (node.nodeType === Node.TEXT_NODE && !par.classList.contains('foo')) { updateText(node, par); } } } function updateText(el, par) { var nv = el.nodeValue, txt = nv.replace(/Questions/g, '<span class="foo">Questions</span> '); // replace the whole old text node with the new modified one // and inject it as parent HTML par.innerHTML = par.innerHTML.replace(nv, txt); } 

 .foo {color: white; background-color: green; padding: 5px;} 

 <div id="wrapper"> this is test looking for the the word Questions. <br> <div id="test"> <p>Lorem ipsum dolor Questions sit amet, <strong>consectetur</strong> adipisicing elit.</p> <p>Questions 1</p> <p>Questions 2</p> <p>Questions 3</p> <p>Questions 4</p> </div> <div>Lorem ipsum dolor sit amet, Questions consectetur adipisicing elit. Ipsa sed Questions ratione dolorem at repellendus animi eveniet similique repellat, sequi rem numquam debitis sit reprehenderit laborum dicta omnis iure quidem atque?</div> </div> 

Answer 3

看到評論，不要使用這個，因為它可以嚴重搞亂頁面。

為后代保留，不要使用：

document.body.innerHTML = document.body.innerHTML.replaceAll(myVar, "<"+myTag+">"+myVar+</"+myTag+">");

有關https://stackoverflow.com/a/17606289/6660122和評論中的更多信息。

 String.prototype.replaceAll = function(search, replacement) { var target = this; return target.split(search).join(replacement); }; document.body.innerHTML = document.body.innerHTML.replaceAll("Questions", "<b>Questions</b>"); 

 <p>Questions1</p> <p>Questions 2</p> <p>Questions 3</p> <p>Questions 4</p> 

很好的學習案例！