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

迭代childNodes的{{1}}并查找文字节点

<强>演示

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;
  }
});

Answer 2

<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 3

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

这将为您提供大小为3的数组，其中图像组件将位于第二个索引处，因此您可以简单地将更新的值添加到data [0]和data [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>中的文字？

3 个答案: