Javascript:仅替换 内的文本？

Question

如何仅替换 <p></p> 中的文本不删除里面的任何其他元素？

它实际上看起来像这样:

<div class = "text">
    <p>
        "Old text 1 "
        <img src="http://urlofimage.com"> 
        "Old 2"
    </p>
</div>

我想得到这个:

<div class = "text">
    <p>
        "New text 1 "
        <img src="http://urlofimage.com"> 
        "New text 2"
    </p>
</div>

Answer 1

迭代p的childNodes并查找文本节点

var p = document.querySelector( ".text p" );
Array.from( p.childNodes ).forEach( s => {
   if ( s.nodeType == Node.TEXT_NODE && s.textContent.trim().length > 0 )
   {
      //change the value here
   }
});

演示

var p = document.querySelector(".text p");
Array.from(p.childNodes).forEach( (s, i) => {
  if (s.nodeType == Node.TEXT_NODE && s.textContent.trim().length > 0) {
     s.textContent = "new value" + i;
  }
});

<div class="text">
  <p>
    "Old text 1 "
    <img src="http://urlofimage.com"> "Old 2"
  </p>
</div>