用 jQuery 替换 HTML 页面中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4886319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace text in HTML page with jQuery
提问by Developer
How do I replace any string in jQuery?
如何替换 jQuery 中的任何字符串？
Let's say I have a string "-9o0-9909"and I want to replace it with another string.
假设我有一个字符串"-9o0-9909"，我想用另一个字符串替换它。
回答by Scoobler
You could use the following to replace the first occurrence of a word within the body of the page:
您可以使用以下内容替换页面正文中第一次出现的单词：
var replaced = $("body").html().replace('-9o0-9909','The new string');
$("body").html(replaced);
If you wanted to replace all occurrences of a word, you need to use regex and declare it global /g:
如果要替换所有出现的单词，则需要使用正则表达式并将其声明为 global /g：
var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string');
$("body").html(replaced);
If you wanted a one liner:
如果你想要一个单衬：
$("body").html($("body").html().replace(/12345-6789/g,'<b>abcde-fghi</b>'));
You are basically taking all of the HTML within the <body>tags of the page into a string variable, using replace()to find and change the first occurrence of the found string with a new string. Or if you want to find and replace all occurrences of the string introduce a little regex to the mix.
您基本上<body>是将页面标签内的所有 HTML放入一个字符串变量中，使用replace()查找并使用新字符串更改找到的字符串的第一次出现。或者，如果您想查找并替换所有出现的字符串，请在混合中引入一些正则表达式。
See a demo here- look at the HTML top left to see the original text, the jQuery below, and the output to the bottom right.
在此处查看演示- 查看左上角的 HTML 以查看原始文本、下方的 jQuery 以及右下方的输出。
回答by dmcb
Like others mentioned in this thread, replacing the entire body HTML is a bad idea because it reinserts the entire DOM and can potentially break any other javascript that was acting on those elements.
与此线程中提到的其他人一样，替换整个 HTML 正文是一个坏主意，因为它会重新插入整个 DOM，并且可能会破坏作用于这些元素的任何其他 javascript。
Instead, replace just the text on your page and not the DOM elements themselves using jQuery filter:
相反，使用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 is the type of node we are looking to replace the contents of. nodeType 3 is text. See the full list here.
this.nodeType 是我们要替换其内容的节点类型。nodeType 3 是文本。在此处查看完整列表。
回答by alex
...I have a string "-9o0-9909" and I want to replace it with another string.
...我有一个字符串“-9o0-9909”，我想用另一个字符串替换它。
The code below will do that.
下面的代码将做到这一点。
var str = '-9o0-9909';
str = 'new string';
Jokes aside, replacing text nodes is not trivial with JavaScript.
撇开笑话不谈，用 JavaScript 替换文本节点并非易事。
I've written a post about this: Replacing text with JavaScript.
我写了一篇关于这个的文章：用 JavaScript 替换文本。
回答by Alex Grande
The html replace idea is good, but if done to the document.body, the page will blink and ads will disappear.
html 替换的想法是好的，但是如果对 document.body 进行了替换，页面将闪烁并且广告将消失。
My solution:
$("*:contains('purrfect')").each(function() {
var replaced = $(this).html().replace(/purrfect/g, "purrfect");
$(this).html(replaced);
});
我的解决方案：
$("*:contains('purrfect')").each(function() {
var replaced = $(this).html().replace(/purrfect/g, "purrfect");
$(this).html(replaced);
});
回答by bishop
Check out Padolsey's article on DOM find and replace, as well as the library to implement the described algorithm.
查看Padolsey 关于 DOM 查找和替换的文章，以及实现所描述算法的库。
In this sample usage, I replace all text inside a <div id="content">that looks like a US telephone number with a tel:scheme link:
在此示例用法中，我将 a<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;
}
});
回答by Chris Pennycuick
回答by Raoof Arakkal
var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string');
$("body").html(replaced);
for variable:
对于变量：
var replaced = $("body").html().replace(new RegExp("-1o9-2202", "igm"),'The ALL new string');
$("body").html(replaced);
