替换正文中的单词

Question

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

喜欢用"hi"代替"hello"？

请仅使用不带jQuery的JavaScript.

Answer 1

要用HTML替换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');

Answer 2

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

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

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

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

Answer 4

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

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

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

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

src：如何替换 JavaScript 中出现的所有字符串？

Answer 5

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

为了使它正常工作,我使用了一个库来完成这项工作.

该库有一个很棒的API.包含脚本后,我这样调用它:

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

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

这是针对16kB findAndReplaceDOMText有点太重的情况。

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

更多信息可以在这里找到： https://zgheb.com/i?v= blog&pl=71#12.11.2020_-_Unobstrusively_replace_text_with_JavaScript

注意：我是该链接的作者