用 jQuery 替换 HTML 页面中的文本答案

【问题标题】：Replace text in HTML page with jQuery用 jQuery 替换 HTML 页面中的文本
【发布时间】：2011-06-20 15:43:55
【问题描述】：

如何替换 jQuery 中的任何字符串？

假设我有一个字符串"-9o0-9909"，我想用另一个字符串替换它。

【问题讨论】：

How to replace a block of HTML with another block of HTML using jQuery 在提问前可能重复，最好在输入问题标题时查看系统自动提出的建议
您能否详细说明为什么您认为 jquery 是可行的方法 - 到目前为止的答案可能偏离轨道。
我可以更改 c# 页面、javascript 和数据库以及 html 页面中的文本，但我在考虑是否可以在页面加载后使用 jquery 来实现。我正在努力节省一些时间并学习新的东西:)

标签： jquery

【解决方案1】：

您可以使用以下内容替换页面正文中第一次出现的单词：

var replaced = $("body").html().replace('-9o0-9909','The new string');
$("body").html(replaced);

如果要替换所有出现的单词，则需要使用正则表达式并将其声明为全局/g：

var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string');
$("body").html(replaced);

如果你想要一个班轮：

$("body").html($("body").html().replace(/12345-6789/g,'<b>abcde-fghi</b>'));

您基本上是将页面的<body> 标记中的所有HTML 放入一个字符串变量中，使用replace() 查找并使用新字符串更改找到的字符串的第一次出现。或者，如果您想查找并替换所有出现的字符串，请在混合中引入一点正则表达式。

See a demo here - 查看 HTML 左上角的原始文本，下面的 jQuery 和右下角的输出。

【讨论】：

代码运行良好，感谢 scoobler。 jQuery(function($) { var 替换 = $("body").html().replace(/12212-522-1212/ig,'2121-2121-0000'); $("body").html(替换); });
我认为这不是很有效...我们应该寻找更好的解决方案伙计们！
这个解决方案不好，因为它改变了 HTML DOM。它正在替换完整的 HTML，因此页面上的所有内容都被重新插入，这对于简单的站点来说很好，但是如果你有很多 javascript，它们会被破坏，因为 DOM 发生了变化。
除了是一个好的解决方案之外，$("body").html() 不会有 body 标签。如果您打算替换 body 标记或其属性上的某些内容，请使用 outerHTML。
是的，这样做会重新触发页面上的脚本；除了最简单的情况外，这不是通用解决方案。

【解决方案2】：

与此线程中提到的其他人一样，替换整个正文 HTML 是一个坏主意，因为它会重新插入整个 DOM，并且可能会破坏作用于这些元素的任何其他 javascript。

相反，只需使用jQuery filter 替换页面上的文本，而不是 DOM 元素本身：

  $('body :not(script)').contents().filter(function() {
    return this.nodeType === 3;
  }).replaceWith(function() {
      return this.nodeValue.replace('-9o0-9909','The new string');
  });

this.nodeType 是我们要替换其内容的节点类型。 nodeType 3 是文本。 See the full list here.

【讨论】：

是的，这个没有破坏 javascript，而另一个确实破坏了 javascript，大人物！

【解决方案3】：

...我有一个字符串“-9o0-9909”，我想用另一个字符串替换它。

下面的代码会做到这一点。

var str = '-9o0-9909';

str = 'new string';

撇开玩笑不谈，用 JavaScript 替换文本节点并非易事。

我已经写了一篇关于这个的帖子：Replacing text with JavaScript。

【讨论】：

链接中的代码处理几乎所有情况。对我来说，它在集合中的<br /> 上很无聊（child 是null），而且它也会时不时地在splitText 上莫名其妙地崩溃，因为“拆分偏移量超过了文本节点长度”。此外，“canvas”被错误拼写为“cavas”。不过，+1。
@bishop 谢谢，我肯定需要更新那个帖子。
不客气。我喜欢你的代码是多么的简短和容易，我只是无法让它适应我的用例。我最终选择了padolsey's findAndReplaceDOMText library——重量更重，但涵盖了我能找到的所有角落。

【解决方案4】：

html替换思路不错，但是如果对document.body做了，页面会闪烁，广告会消失。

我的解决方案： $("*:contains('purrfect')").each(function() { var replaced = $(this).html().replace(/purrfect/g, "purrfect"); $(this).html(replaced); });

【讨论】：

这里是死灵法，但这个解决方案是唯一在我的用例中有效的解决方案，谢谢，Alex。

【解决方案5】：

$("#elementID").html("another string");

http://api.jquery.com/html/

【讨论】：

它们并不总是相同的 id，它可能是不同的类名或 id 名。如果我只有 1 个类名或 id 名，这并不难，但大部分时间都是随机的。
所以你想在整个 HTML 树中搜索一个字符串，然后替换它？

【解决方案6】：

var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string');
$("body").html(replaced);

对于变量：

var replaced = $("body").html().replace(new RegExp("-1o9-2202", "igm"),'The ALL new string');
$("body").html(replaced);

【讨论】：

【解决方案7】：

查看Padolsey's article on DOM find and replace，以及the library to implement the described algorithm。

在此示例用法中，我将 <div id="content"> 中看起来像美国电话号码的所有文本替换为 tel: 方案链接：

findAndReplaceDOMText(document.getElementById('content'), {
    find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g,
    replace:function (portion) {
        var a = document.createElement('a');
        a.className = 'telephone';
        a.href = 'tel:' + portion.text.replace(/\D/g, '');
        a.textContent = portion.text;
        return a;
    }
});

【讨论】：