如何在HTML元素中包含所有text_node nodeValue的一部分？ [英] How to wrap part of all text_node nodeValue in an html element?

问题描述

我正在遍历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  

 < p> Questions1< / p> < p>问题2< / p>< p>问题3< / p>< p>问题4< / p>  

div>

解决方案

我认为你需要递归所有的DOM和每个匹配...看看这里： p>



  function replaceacer（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>突出显示< ; / button>< hr>< p> Questions1< / p>< p>问题2< / p>< p>问题3< / p>< p>问题4< / p>< p& ;问题5问题6< / p>< div> < H1>嵌套< / H1>问题< strong>问题4< / strong> < DIV>问题< strong>问题4< / strong>< / div> < DIV>问题< strong>问题4< / strong> < DIV>问题< strong>问题4< / strong>< / div> < / div>< / div>  

I am iterating over all the text node in an html document in order to surround some words with a specific span.

Changing the nodeValue doesn't allow me to insert html. The span is escaped to be shown in plain text and I do not want that.

Here is what I have so far :

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>

解决方案

I think that you need to recurse all the DOM and each match... have a look here:

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>

这篇关于如何在HTML元素中包含所有text_node nodeValue的一部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！