替换正文中的单词答案

【问题标题】：Replace words in the body text替换正文中的单词
【发布时间】：2011-04-05 21:14:26
【问题描述】：

有没有办法替换 HTML 正文中的表格元素中的普通文本？

喜欢用“hi”代替“hello”吗？

请仅使用 JavaScript 而不使用 jQuery。

【问题讨论】：

你能说得更具体些吗？你要替换什么，它在体内的哪个位置等等。
正文有一个 div，其中有一个表格，然后我想替换一些普通文本而不是代码，例如用 ("hi") 替换 ("hello")
如果被替换的单词恰好是类名、标签名或 html 中的任何内容，则以下大多数解决方案将破坏所有事件和整个 dom 结构
看起来问题和答案都是错误的。它询问如何替换单词而不是字符。比如替换这个hello, this is a text randomTexthello应该是hi, this is a text randomTexthello。但是，这里的所有其他答案都替换了字符而不是单词。
我认为Sebastian Simon's answer 比这里的答案更好。

标签： javascript html

【解决方案1】：

要将 HTML 中的字符串替换为另一个字符串，请使用 innerHTML 上的 replace 方法：

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

请注意，这将替换整个正文中的第一个 hello 实例，包括您的 HTML 代码中的任何实例（例如类名等），因此请谨慎使用 - 为了获得更好的结果，请尝试限制您的范围通过使用document.getElementById 或类似方法定位您的代码来替换。

要替换目标字符串的所有实例，请使用带有global 标志的简单正则表达式：

document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');

【讨论】：

对我没用这里是我用的<script type="text/javascript"> window.onload = clear(); function clear() { document.body.innerHTML = document.body.replace('ü', 'n'); } </script>
使用扩展字符可能会更复杂-您的文档使用什么编码？你确定这个字符是 ü，而不是 ü例如..？
你没有准确地复制我的代码 ;-) 确保你在语句的两边都有 innerHTML，即： document.body.innerHTML = document.body.innerHTML.replace(' ü', 'n');
仅供参考 - 第一条评论中的错误是：设置 window.onload = clear; 不带括号“()”。当您编写clear() 时，您实际上执行了函数，但您只想将函数分配给 onload-handler
请注意，现在使用 innerHTML 通常被认为是不好的：slideshare.net/x00mario/the-innerhtml-apocalypse

【解决方案2】：

我最终得到了这个功能来安全地替换没有副作用的文本（到目前为止）：

function replaceInText(element, pattern, replacement) {
    for (let node of element.childNodes) {
        switch (node.nodeType) {
            case Node.ELEMENT_NODE:
                replaceInText(node, pattern, replacement);
                break;
            case Node.TEXT_NODE:
                node.textContent = node.textContent.replace(pattern, replacement);
                break;
            case Node.DOCUMENT_NODE:
                replaceInText(node, pattern, replacement);
        }
    }
}

适用于 findAndReplaceDOMText 的 16kB 有点太重的情况。

【讨论】：

很优雅，有必要把两个箱子分开吗？一个用于 ELEMENT_NODE，另一个用于 DOCUMENT_NODE。还有，好像还有很多其他的nodetypes，是不是其他类型都无所谓了？
@B.Mr.W.我不记得为什么我把这些案例写得这么明确。对于这个问题，这些类型就足够了。请注意，有些类型是特定于 xml 的。

【解决方案3】：

下面的功能对我来说非常适合：

// Note this *is* JQuery, see below for JS solution instead
function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  $(selector).each(function () {
    var $this = $(this);
    if (!$this.children().length)
       $this.text($this.text().replace(matcher, newText));
  });
}

这是一个用法示例：

function replaceAllText() {
  replaceText('*', 'hello', 'hi', 'g');
}

$(document).ready(replaceAllText);
$('html').ajaxStop(replaceAllText);

你也可以像这样直接替换：

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

但要小心，因为它可能也会影响标签、css 和脚本。

编辑： 至于纯 JavaScript 解决方案，请改用此方法：

function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  var elems = document.querySelectorAll(selector), i;

  for (i = 0; i < elems.length; i++)
    if (!elems[i].childNodes.length)
      elems[i].innerHTML = elems[i].innerHTML.replace(matcher, newText);
}

【讨论】：

如何将特定标签（如
或）中的所有文本替换为其他文本？
只需将标签名称添加到第一个输入参数，例如 replaceText('p,span', 'hello', 'hi')
这不能正常工作。考虑一下：
hello world
。你好不会被替换。

【解决方案4】：

我遇到了同样的问题。我在 innerHTML 上使用 replace 编写了自己的函数，但它会搞砸锚链接等。

为了让它正常工作，我使用了library 来完成这项工作。

该库有一个很棒的 API。包含脚本后，我这样称呼它：

findAndReplaceDOMText(document.body, {
  find: 'texttofind',
  replace: 'texttoreplace'
  }
);

【讨论】：

这是解决我的问题的唯一解决方案。我需要使用 REGEX 在整个站点中查找和替换电话号码，而这里的其他答案会破坏我的 DOM 事件。

【解决方案5】：

有时更改 document.body.innerHTML 会破坏页面上的一些 JS 脚本。这是版本，仅更改 text 元素的内容：

function replace(element, from, to) {
    if (element.childNodes.length) {
        element.childNodes.forEach(child => replace(child, from, to));
    } else {
        const cont = element.textContent;
        if (cont) element.textContent = cont.replace(from, to);
    }
};

replace(document.body, new RegExp("hello", "g"), "hi");

【讨论】：

【解决方案6】：

我试图替换一个非常大的字符串，由于某种原因，正则表达式抛出了一些错误/异常。

所以我找到了这个运行速度非常快的正则表达式的替代方案。至少对我来说已经足够快了：

var search = "search string";
var replacement = "replacement string";

document.body.innerHTML = document.body.innerHTML.split(search).join(replacement)

源代码：How to replace all occurrences of a string in JavaScript?

【讨论】：

【解决方案7】：

虽然使用innerHTML.replace 可以工作并且速度非常快，但这会破坏 DOM 状态。

您可以通过在输入字段上设置 "autofocus" 然后在正文上更改 innerHTML 来复制此操作，它将失去焦点。

破坏性较小的方法是：

// retrives all childNodes of body
var childNodes = document.body.childNodes;

// start replacing
replaceInNodes(childNodes, "search", "replace");

function replaceInNodes(nodes,search,replace) {
    // iterate through all nodes
    for (var i = 0; i < nodes.length; i++) { 
        var curNode = nodes[i];
        // if the node has attributes, let us look at those
        // i.e. we want to change "John" in the input placeholder to "Peter" - <input type="text" value="John">
        if (curNode.attributes !== undefined) {
            var curNodeAttributes = curNode.attributes;
            for (var ii = 0; ii < curNodeAttributes.length; ii++) {
                // replace attribute values
                curNodeAttributes[ii].nodeValue = curNodeAttributes[ii].nodeValue.replace(search, replace);
            }   
        }
        // It is a "TEXT_NODE"
        // i.E. <span>John</span>
        if (curNode.nodeType === Node.TEXT_NODE) {
            curNode.data = this.injectIntoString(curNode.data);
        }
        // It is a "ELEMENT_NODE", meaning we need to go deeper
        if (curNode.nodeType === Node.ELEMENT_NODE) {
            this.replaceInNodes(curNode.childNodes);
        }
    }
}

注意：我是上述链接的作者

【讨论】：

【解决方案8】：

使用默认的javascript字符串替换功能

var curInnerHTML = document.body.innerHTML;
curInnerHTML = curInnerHTML.replace("hello", "hi");
document.body.innerHTML = curInnerHTML;

【讨论】：

上面可以写成document.body.innerHTML = document.body.innerHTML.replace(/hello/g, "hi");，并且会以区分大小写的方式替换所有的“hello”实例。

【解决方案9】：

尝试将上述建议的解决方案应用于相当大的文档，替换可能存在于 innerHTML 甚至 innerText 中的相当短的字符串，并且您的 html 设计充其量会被破坏

因此我首先通过 HTML DOM 节点只拾取文本节点元素，像这样

function textNodesUnder(node){
  var all = [];
  for (node=node.firstChild;node;node=node.nextSibling){
    if (node.nodeType==3) all.push(node);
    else all = all.concat(textNodesUnder(node));
  }
  return all;
}

textNodes=textNodesUnder(document.body)
for (i in textNodes) { textNodes[i].nodeValue = textNodes[i].nodeValue.replace(/hello/g, 'hi');

`然后我在循环中对所有这些都应用了替换

【讨论】：

【解决方案10】：

想在funky-future's answer 中添加一个示例，因为我不断收到此错误：

Uncaught TypeError: element.childNodes is not iterable

这样使用：

replaceInText(document.body,"search term","replacement");

jQuery 选择器对我不起作用。

【讨论】：

如果您有新问题，请点击按钮提出问题。如果有助于提供上下文，请包含指向此问题的链接。 - From Review
这不是一个新问题，我通过提供一个有效的示例来扩展 funky-future 的答案。不得不发布一个新答案，因为我缺乏代表来评论他的评论。

【解决方案11】：

我是Javascript 的新手，刚刚开始学习这些技能。请检查以下方法是否对替换文本有用。

<script>

    var txt=document.getElementById("demo").innerHTML;
    var pos = txt.replace(/Hello/g, "hi")
    document.getElementById("demo").innerHTML = pos;

</script>

【讨论】：