替换正文中的单词


93

有没有办法替换放置在HTML正文中的table元素内的普通文本?

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

请仅使用不带jQuery的JavaScript


您能更具体一点吗?您想更换什么,它在体内的位置,等等
。– Zirak

身体有一个div,并在该表中,然后我想替换一些普通的文本,而不是用(hi)替换(“ hello”)的代码
Wahtever 2011年

3
低于大多数解决方案将销毁所有事件和整个DOM结构,如果字被替换正好是类名,标签名称或任何在HTML
穆罕默德乌默尔

看来问题和答案都是错误的。它询问如何替换单词而不是字符。例如更换这hello, this is a text randomTexthello应该是hi, this is a text randomTexthello。但是,这里所有其他答案都代替了字符而不是单词。
Orhun Alp口服

Answers:


139

要用另一个字符串替换HTML中的字符串,请使用innerHTMLreplace方法:

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

请注意,这将替换hello整个正文的第一个实例,包括HTML代码中的任何实例(例如,类名等。),请谨慎使用-为了获得更好的结果,请尝试通过使用document.getElementById或类似名称。

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

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

1
没有为我工作,这是我使用的 <script type="text/javascript"> window.onload = clear(); function clear() { document.body.innerHTML = document.body.replace('ü', 'n'); } </script>
Wahtever 2011年

使用扩展字符可能会更加复杂-您的文档采用哪种编码?您确定字符是ü,而不是&#252; 例如..?
德克斯特

2
您没有正确地复制我的代码;-)确保语句的两边都有innerHTML,即:document.body.innerHTML = document.body.innerHTML.replace('ü','n');
德克斯特

3
仅供参考-第一个注释中的错误是:设置为window.onload = clear;不带括号“()”。在编写时,clear()您实际上执行了该函数,但是您只想将该函数分配给onload-handler
Philipp

1
请注意,如今
kufudo 2014年

13

下面的功能对我来说很完美:

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

如何将特定标签(例如<p>或<span>)中的所有文本替换为其他文本?
GJZ

只需将标签名称添加到第一个输入参数即可,例如replaceText('p,span','hello','hi')
Ziad

这不能正常工作。考虑一下:<p>你好<strong>世界</ strong> </ p>。你好不会被取代。
David Vielhuber

嗨,我是编码的初学者。我可以用AppleScript做一些事情。但这就是我所知道的。您能给我一些建议吗,一开始是什么,我的目的是使用javascript来自动收集数据库,图像,视频,填写Web表单,上传,可能是与excel一起使用。Applescript可以使用它,但Java似乎是一个全新的水平,而且更好。为了达到我的目的,我应该从什么开始。我对javascript的了解为0,甚至不知道如何使您的脚本发挥作用!我应该粘贴到哪里?非常感谢你!
Duy Duy

10

我最终使用了此功能来安全地替换没有副作用的文本(到目前为止):

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


嗨,我是编码的初学者。我可以用AppleScript做一些事情。但这就是我所知道的。您能给我一些建议吗,一开始是什么,我的目的是使用javascript来自动收集数据库,图像,视频,填写Web表单,上传,可能是与excel一起使用。Applescript可以使用它,但Java似乎是一个全新的水平,而且更好。为了达到我的目的,我应该从什么开始。我对javascript的了解为0,甚至不知道如何使您的脚本发挥作用!我应该粘贴到哪里?非常感谢你!
Duy Duy

Duy Duy,有很多问题。仅给出任务说明,就足以辞职。
时髦的未来

9

我有同样的问题。我在innerHTML上使用replace编写了自己的函数,但这会破坏锚链接等。

为了使其正常工作,我使用了一个图书馆来完成此任务。

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

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

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

3

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

因此,我发现了这种替代正则表达式的方法,它的运行速度也非常快。至少它对我来说足够快:

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

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

src:如何替换JavaScript中所有出现的字符串?


2

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

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

1

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

`然后我周期性地对所有这些替换应用了替换


1

当我不断收到此错误时,想在时髦的答案中添加一个示例:

Uncaught TypeError: element.childNodes is not iterable

像这样使用:

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

它不适用于jQuery选择器。


1
如果您有新问题,请单击“ 提问”按钮提问。如果它有助于提供上下文,请包括指向该问题的链接。- 来自评论
SilverNak '19

1
这不是一个新问题,我通过提供一个有效的示例来扩展funky-future的答案。我不得不发布一个新的答案,因为我缺少代表对他发表评论。
Y Stroli '19

0

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

<script>

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

</script>

0

有时更改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");
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.