Question

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

喜欢用“hi”替换“你好”吗？

请仅使用 JavaScript 而不使用 jQuery 。

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

该库有一个很棒的API。在包含脚本之后我称之为：

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

Answer 4

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

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

Answer 5

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

所以我找到了正则表达式的替代方法，它也运行得非常快。至少它对我来说足够快了：

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

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

src：How to replace all occurrences of a string in JavaScript?

Answer 6

我最终使用此功能安全地替换没有副作用的文本（到目前为止）：

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有点太重的情况。

Answer 7

想在我不断收到此错误的情况下向funky-future's answer添加示例：

Uncaught TypeError: element.childNodes is not iterable

使用如下：

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

它不适用于jQuery选择器。

Answer 8

有时更改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");

Answer 9

虽然使用innerHTML.replace可以正常工作并且非常快，但这会破坏DOM状态。您可以通过在输入字段上设置“自动对焦”，然后在正文上更改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 == 3){
                curNode.data = this.injectIntoString(curNode.data);
            }
            // It is a "ELEMENT_NODE", meaning we need to go deeper
            if(curNode.nodeType == 1){
                this.replaceInNodes(curNode.childNodes);
            }
        }
}

更多信息可以在这里找到： https://zgheb.com/i?v=blog&pl=71#12.11.2020_-_Unobstrusively_replace_text_with_JavaScript 注意：我是上述链接的作者

Answer 10

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

<script>

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

</script>

Answer 11

尝试将上述建议的解决方案应用于相当大的文档，替换可能存在于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');

`然后我在周期中将所有替换应用于

替换正文中的单词

11 个答案: