如何使用javascript查找和替换几个标签中的单词？答案

【问题标题】：How to use javascript to find and replace a word split in a few tags?如何使用javascript查找和替换几个标签中的单词？
【发布时间】：2018-12-31 22:57:29
【问题描述】：

我想使用 javascript 来查找和替换一个被分成几个标签的单词。

例如html代码：

<html>
    <body>
        <div id="page-container">
            This is an apple.
            <div>
                <span>a</span><span>p</span><span>ple</span>.
            </div>
        </div>
    </body>
</html>

它在网络浏览器中如下所示：

This is an apple.
apple.

我使用这个 javascript 来查找和替换单词“apple”：

var a = document.getElementById('page-container').innerHTML; 
a=a.replace(/apple/g,'pear'); 
document.getElementById('page-container').innerText=a;

但是在网页浏览器中的结果很糟糕，所有的标签都无法工作：

This is an pear.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>

replace 功能似乎适用于第一行，但无法识别标签中的单词 split。这是一个例子，整个内容可能会更复杂，有更多的标签，比如，，不仅......有没有办法只替换文本但保留原始的html标签格式？

【问题讨论】：

是的，但是您需要清楚您希望最终得到什么 html。问题是因为你阅读了 html，所以你得到了所有的标签。您可以只阅读文本，但这样做会在替换第二个苹果时删除所有 html 标签。
我想替换单词并保持标签格式相同。如果有更多标签，内容可能会更复杂，而不仅仅是 ...
如何定义“相同格式”？在您的示例中，第一个和第二个字母被包裹在跨度中，而其余 3 个字母在一个跨度中。替换的“pear”没有相同数量的字母，所以最好的办法是在第一个和第二个字母周围放置跨度，而“其余”将有一个跨度。但这不是一致的格式，因此您可能不想将其硬编码到替换中。如果没有对最终格式的一致定义，就无法自动进行替换。

标签： javascript html node.js

【解决方案1】：

var a = document.getElementById('page-container').textContent;
a = a.replace(/apple/g, 'pear');
var a=a.split('.');
document.getElementById('page-container').innerHTML = `${a[0]}.<br/><span> ${a[1]} 
<span>`;

【讨论】：

感谢您的帮助。整个内容要复杂得多，有更多标签，不仅是 ... 有没有办法只替换文本但保留原始标签格式？

【解决方案2】：

那是因为你有嵌套元素，所以当你设置父div的innerHTML时，它把inner div当作文本打印出来，尝试替换这个：

document.getElementById('page-container').innerText=a;

用这个：

document.getElementById("page-container").firstChild.innerHTML = a;

因此，您只定位您的第一个孩子，即父 div。

活生生的例子：

https://jsbin.com/hujurageya/edit?html,js,output

【讨论】：