Javascript: 仅替换 <p></p> 中的文本？

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

<html>
<body>

<div class = "text">
    <p>
        <span id="text1">New text 1 </span>
        <img src="http://urlofimage.com"> 
        <span id="text2">New text 1 </span>
    </p>
</div>
<button onclick="myFunction()">Change Text</button>


<script>
function myFunction() {
    document.getElementById("text1").innerHTML = "Hello there";
}

</script>

</body>
</html>

用唯一 ID 括起文本。

Answer 2

迭代 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>

Answer 3

data = $('.text p').html().trim().split('\n')

这将为您提供大小为 3 的数组，其中图像组件将位于第二个索引处，因此您只需将更新后的值添加到数据 [0] 和数据 [2]，然后使用 .toString()函数你可以获得更新内容的简单字符串，你可以在 $('.text p').

data[0] = '"New text 1 "';
data[2] = '"New text 2"';

var updatedString = data.toString();
$('.text p').html(updatedString);

可能有一些错字，因为我没有执行这个脚本，但这个逻辑应该有效。

++++++++++++++更新++++++++++++++++

它在我的机器上运行良好，只是添加了代码来处理逗号，这里是完整的代码：

   $(document).ready(function(){
        data = $('.text p').html().trim().split('\n')
        data[0] = '"New text 1 "';
        data[2] = '"New text 2"';
        console.log(data);
        var updatedString = data.toString();
        updatedString = updatedString.replace(/,/g, "\n");
        $('.text p').html(updatedString);
    })

Javascript: 仅替换 <p></p> 中的文本？

Javascript: Replace only text inside <p></p>?

html

javascript

replace

paragraph