用jQueryreplaceHTML页面中的文本
我如何replacejQuery中的任何string?
比方说,我有一个string"-9o0-9909"
,我想用另一个stringreplace它。
您可以使用以下内容replace页面正文中的第一个单词:
var replaced = $("body").html().replace('-9o0-9909','The new string'); $("body").html(replaced);
如果您想要replace所有出现的单词,则需要使用正则expression式并将其声明为global /g
:
var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string'); $("body").html(replaced);
如果你想要一个class轮,
$("body").html($("body").html().replace(/12345-6789/g,'<b>abcde-fghi</b>'));
基本上,将页面的<body>
标记内的所有HTML转换为一个stringvariables,使用replace()来查找和更改第一次出现的string。 或者,如果你想find并replace所有出现的string,请在混合中引入一点正则expression式。
在这里看到一个演示 – 看看左上angular的HTML,看到原来的文字,下面的jQuery,输出到右下angular。
像在这个线程中提到的其他人一样,replace整个主体HTML是一个坏主意,因为它重新插入整个DOM,并可能会破坏任何其他的JavaScript的行为,这些元素。
相反,只需使用jQueryfilterreplace页面上的文本,而不是DOM元素本身:
$('body :not(script)').contents().filter(function() { return this.nodeType === 3; }).replaceWith(function() { return this.nodeValue.replace('-9o0-9909','The new string'); });
this.nodeType是我们正在寻找replace内容的节点的types。 节点types3是文本。 在这里查看完整列表 。
…我有一个string“-9o0-9909”,我想用另一个stringreplace它。
下面的代码将做到这一点。
var str = '-9o0-9909'; str = 'new string';
除了笑话之外,用JavaScript代替文本节点也不是微不足道的。
我写了一篇关于这个的文章: 用JavaScript代替文本 。
htmlreplace的想法是好的,但如果对document.body做了,页面将会闪烁,广告将消失。
我的解决scheme
$("*:contains('purrfect')").each(function() { var replaced = $(this).html().replace(/purrfect/g, "purrfect"); $(this).html(replaced); });
查看Padolsey关于DOM查找和replace的文章 ,以及库实现所描述的algorithm 。
在这个示例中,我使用tel:
scheme链接replace了看起来像美国电话号码的<div id="content">
中的所有文本:
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; } });
$("#elementID").html("another string");
var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string'); $("body").html(replaced);
对于variables:
var replaced = $("body").html().replace(new RegExp("-1o9-2202", "igm"),'The ALL new string'); $("body").html(replaced);