使用jQuery替换HTML页面中的文本

Question

使用jQuery替换HTML页面中的文本

jquery

51

如何在jQuery中替换任意字符串？

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

- Developer

1

在提问之前，建议先检查系统在输入问题标题时自动生成的建议，以避免出现如何使用jQuery替换HTML代码块中的另一个HTML代码块等类似问题的重复。 - Pekka

请问你为什么认为 jQuery 是最佳选择，能否详细解释一下？迄今为止的答案可能偏离了主题。 - Xhalent

我可以更改C#页面、JavaScript和数据库以及HTML页面中的文本，但我在思考是否可能在页面加载后使用jQuery实现。我正在尝试节省时间并学习一些新东西 :) - Developer

7个回答

57

像其他帖子中提到的那样，替换整个 HTML 的做法是不好的，因为它会重新插入整个DOM，并有可能破坏作用于这些元素的任何其他javascript。

相反，使用jQuery过滤器仅替换页面上的文本而不是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 表示文本。在此处查看完整列表。

- dmcb

是的，这个没有破坏JavaScript，而另一个确实破坏了JavaScript，太棒了！ - Ng Sek Long

你好，使用我的示例 https://jsfiddle.net/xpcf49mh 对我来说不起作用。 - Lenin Zapata

12

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

下面的代码可以做到这一点。

var str = '-9o0-9909';

str = 'new string';

开玩笑的，使用JavaScript替换文本节点并不是一件容易的事情。

我写了一篇关于此的文章：使用JavaScript替换文本。

- alex

1

你链接中的代码几乎处理了所有情况。对我来说，它在设置中的 <br />（child 为 null）时会出现故障，并且有时会因 "split offset exceeds text node length" 而无法解释地崩溃。另外，“canvas” 被拼错为“cavas”。尽管如此，还是点赞。 - bishop

@bishop 谢谢，我肯定需要更新那篇文章。 - alex

1

不用谢。我很喜欢你的代码简短易懂，只是我无法将其适应到我的用例中。最终我选择了padolsey的findAndReplaceDOMText库——虽然更加复杂，但覆盖了我能找到的所有边角情况。 - bishop

7

使用html替换的想法不错，但如果应用到document.body上，页面会闪烁且广告将消失。

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

- Alex Grande

不好意思打扰，但这个解决方案是我使用情况下唯一有效的，谢谢，Alex。 - FalsePozitive

3

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

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

- Chris Pennycuick

它们并不总是相同的id，可能是不同的类名或id名称。如果只有一个类名或id名称，那就不难，但大多数情况下都是随机的。 - Developer

你想要在整个HTML树中搜索一个字符串，并将其替换掉吗？ - vicvicvic

2

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

- Raoof Arakkal

2

请查看Padolsey关于DOM查找和替换的文章，以及实现所述算法的库。

在此示例中，我将所有看起来像美国电话号码的<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;
    }
});

- bishop

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scoobler · Accepted Answer

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

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()函数找到并更改第一次出现的字符串为新的字符串。如果你想查找和替换所有出现的字符串，那么可以加入一点正则表达式。

请点击此处查看演示 - 查看左上角的HTML文本来查看原始文本、下方的jQuery代码以及右下方的输出结果。