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

迭代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 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 个解决方案

解决方案1
2 已采纳 2018-03-14 10:03:11

解决方案2
1 2018-03-14 10:02:45

解决方案3
0 2018-03-14 10:17:56

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2018-03-14 10:03:11

解决方案2 1 2018-03-14 10:02:45

解决方案3 0 2018-03-14 10:17:56

解决方案1
2 已采纳 2018-03-14 10:03:11

解决方案2
1 2018-03-14 10:02:45

解决方案3
0 2018-03-14 10:17:56