jQuery替换html页面中所有出现的字符串
Posted
技术标签:
【中文标题】jQuery替换html页面中所有出现的字符串【英文标题】：jQuery replace all occurrences of a string in an html page 【发布时间】：2014-09-26 08:55:10 【问题描述】：我正在做一个项目，我需要用另一个字符串替换所有出现的字符串。但是，如果它是文本，我只想替换字符串。比如我想转这个……
<div id="container">
<h1>Hi</h1>
<h2 class="Hi">Test</h2>
Hi
</div>
进入...
<div id="container">
<h1>Hello</h1>
<h2 class="Hi">Test</h2>
Hello
</div>
在那个例子中，所有的“Hi”都变成了“Hello”，除了“Hi”作为 h2 类。 我试过了……
$("#container").html( $("#container").html().replace( /Hi/g, "Hello" ) )
...但这也替换了 html 中所有出现的“Hi”
【问题讨论】：
试试吧！这个问题会让你开始：***.com/questions/9178174/find-all-text-nodes 【参考方案1】：这个：
$("#container").contents().each(function ()
if (this.nodeType === 3) this.nodeValue = $.trim($(this).text()).replace(/Hi/g, "Hello")
if (this.nodeType === 1) $(this).html( $(this).html().replace(/Hi/g, "Hello") )
)
产生这个：
<div id="container">
<h1>Hello</h1>
<h2 class="Hi">Test</h2>
Hello
</div>
jsFiddle example
【讨论】：
如果有嵌套的 HTML 标签，这不起作用，例如<h2 class="Hi">Test <span class="Hi"></span></h2>【参考方案2】：
很好的结果：
function str_replace_all(string, str_find, str_replace)
try
return string.replace( new RegExp(str_find, "gi"), str_replace ) ;
catch(ex)return string;
而且更容易记住...
【讨论】：
【参考方案3】： replacedstr = str.replace(/needtoreplace/gi, 'replacewith');
needtoreplace 不应该被' 舍入
【讨论】：
【参考方案4】：//Get all text nodes in a given container
//Source: http://***.com/a/4399718/560114
function getTextNodesIn(node, includeWhitespaceNodes)
var textNodes = [], nonWhitespaceMatcher = /\S/;
function getTextNodes(node)
if (node.nodeType == 3)
if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue))
textNodes.push(node);
else
for (var i = 0, len = node.childNodes.length; i < len; ++i)
getTextNodes(node.childNodes[i]);
getTextNodes(node);
return textNodes;
var textNodes = getTextNodesIn( $("#container")[0], false );
var i = textNodes.length;
var node;
while (i--)
node = textNodes[i];
node.textContent = node.textContent.replace(/Hi/g, "Hello");
请注意，这也将匹配“Hi”只是单词一部分的单词，例如“爬坡道”。要仅匹配整个单词，请使用/\bHi\b/g
【讨论】：
这是迄今为止我看到的最被低估的答案之一。即使在整个<body> 上运行，它也非常有效【参考方案5】：
给你 => http://jsfiddle.net/c3w6X/1/
var children='';
$('#container').children().each(function()
$(this).html($(this).html().replace(/Hi/g,"Hello")); //change the text of the children
children=children+$(this)[0].outerHTML; //copy the changed child
);
var theText=$('#container').clone().children().remove().end().text(); //get the text outside of the child in the root of the element
$('#container').html(''); //empty the container
$('#container').append(children+theText.replace(/Hi/g,"Hello")); //add the changed text of the root and the changed children to the already emptied element
【讨论】：
如果有嵌套的 HTML 标签，这不起作用，例如<h2 class="Hi">Test <span class="Hi"></span></h2>
在这个特定的例子中，但我认为 OP 要求的是一个通用的解决方案。该示例可能是他真实 HTML 的精简版。
@MattBrowne 你是对的，但 j08691 的回答确实如此
不，实际上并没有……我会在那里发表同样的评论。以上是关于jQuery替换html页面中所有出现的字符串的主要内容，如果未能解决你的问题，请参考以下文章
[ jquery 文档处理 replaceWith(content|fn) replaceAll(content) ] 此方法用于把所有匹配的元素替换成指定的HTML或DOM元素