替换 <body> 中的文本答案

【问题标题】：Replacing text in <body>替换 <body> 中的文本
【发布时间】：2013-01-21 20:26:34
【问题描述】：

我是 javascript 新手，如果您能帮助我解决我面临的这个问题，那就太好了。在下面的 HTML 代码中，我试图突出显示一个特定的词（比如“消息”），方法是通过附加到该词以使其变为粗体来替换该词。

<body>
  <img src="http://some.web.site/image.jpg" title="abcd" />
  This is a test message.
</body>

字符串“这是一条测试消息”直接在正文元素中找到（因此没有 id，因此无法使用 getElementById 来提取文本）。

所以我得到了整个 body 元素并使用 textContent 提取了文本。（这给了我文本并忽略了 html 中文本上方的图像。）然后在突出显示这个词后，我将'body's textContent 设置回新字符串。

问题是现在我无法保留文本上方的图像，并且新正文中只有 textContent 的值，并且图像丢失了。这是我使用的 JS（但现在我将 message 替换为 phone 这个词）。

<script>
function myFunction(){
  var x = document.getElementsByTagName('body')[0].textContent;
  var v = x.replace("message","phone");
  document.getElementsByTagName('body')[0].textContent = v;
} 
</script>

有没有其他方法可以替换直接放在正文下方的文本，其中也有其他元素？

【问题讨论】：

Y U NO using jQuery?
因为jQuery sucks?
@Kolink jQuery 如果您正确使用它，它不会很糟糕，就像图片所暗示的那样。如果您使用完整的功能，它是一个很棒的工具。否则 vanilla JS 会更快、更流畅、更容易，是的。但是对于使用大量 javascript 的大型项目，jQuery 是减少项目工作时间的好方法。
@Rune 我同意你的说法，但在我看来，即使使用得当，它也是一个笨拙的工具怪物。
@Kolink 我必须同意它是巨大的，你可以在一个项目中使用很多东西，但不能在另一个项目中使用。但是如果不使用太多，对速度的影响不会太大。由于所有的滑动功能等，它非常适合创建交互式菜单之类的东西。如果您使用 vanilla JS，您需要重新发明一半的轮子以获得正确的动画，从而浪费时间。通常在开发网站时，时间就是金钱。你不能说网站明显变慢只是因为 jQuery 本身。这可能是因为你用它做什么以及你是怎么做的。哇，字符限制：O

标签： javascript html

【解决方案1】：

为了做这样的事情，您需要遍历文档中的所有文本节点，搜索单词并将其换行。

类似这样的：

function highlight(str,node) {
    if( !node) node = document.body;
    var c = node.children, l = c.length, i, p;
    for( i=0; i<l; i++) {
        if( c[i].nodeType == 1) highlight(str,c[i]);
        if( c[i].nodeType == 3) {
            if( (p=c[i].data.indexOf(str)) > -1) {
                c[i].splitText(p);
                c[i].nextSibling.deleteData(0,str.length);
                c[i].parentNode.insertBefore(
                    document.createElement('b'),c[i].nextSibling
                ).appendChild(document.createTextNode(str));
            }
        }
    }
}

应该这样做。要使用，只需拨打highlight("message")，使用您想要的任何文字。请注意，这将区分大小写 - 如果您需要不区分大小写的匹配，请告诉我，我会进行编辑以考虑到这一点（尽管在大多数情况下您可能会使用 highlight("message"); highlight("Message");）

此外，您可以将搜索限制为特定元素。假设您有<div id="replace-me">，您可以将搜索限制在该元素，如下所示：

highlight("message",document.getElementById('replace-me'));

（可以使用任何方式获取节点，这只是最简单的）

【讨论】：

感谢您的快速回复！..真的很有帮助！

【解决方案2】：

textContent 属性设置或返回指定节点及其所有后代的文本内容。

如果您设置了 textContent 属性，所有子节点都会被移除并替换为包含指定字符串的单个 Text 节点。

参考here

【讨论】：

【解决方案3】：

试试

var children = document.body.childNodes;
for(var len = children.length, child=0; child<len; child++){
    if (children[child].nodeType === 3){ // textnode
        var contents = children[child].nodeValue;
       children[child].nodeValue = contents.replace(/message/gi, 'phone');
    }
}

【讨论】：

这仅适用于顶级节点。虽然在问题中给出的特定示例中就是这种情况，但即使有一个包含元素，它也不会起作用。
@Kolink，我知道。我正在回答最后的“有没有其他方法可以替换直接放在正文下方的文本”