Question

如何使用jQuery替换页面上的文本而不替换标记内的标记和文本，例如：<a>,<input>,<button>,<textarea>,<input>,<select>。

例如，这是HTML代码

<html>
<head>
    <title>Testing</title>
</head>
<body>
    Hello, this is a test replacing {REPLACE_ME} with <b>{REPLACED}</b>.
    <br/><br/>
    I want {REPLACE_ME} and {REPLACE_ME} to be <b>{REPLACED}</b>, however I don't want this <a href="#">{REPLACE_ME}</a> to become <a href="#">{REPLACED}</a>.
    Same with <textarea>{REPLACE_ME}</textarea>, it shouldn't change.
    <br/><br/>
</body>

我有这个jQuery来替换文本

var replaced = $("body").html().replace(/{REPLACE_ME}/gi,'<b>{REPLACED}</b>');
 $("body").html(replaced);

这是JSFiddle

http://jsfiddle.net/E8ZPY/

Answer 1

$('body, body *:not(a,button,textarea,option)').contents().filter(function() {
    return this.nodeType === 3;
}).each(function() {
    var escaped = $('<div></div>').text($(this).text()).html();
    $(this).replaceWith(escaped.replace(/\{REPLACE_ME\}/gi,'<b>{REPLACED}</b>'));
});

JSFiddle

（我不需要包含input，而我使用option代替select，因为option是带有儿童文本节点的那个。）< / p>

Answer 2

首先添加jquery文件

在正则表达式中为特殊字符

应用“\”

var replaced = $("body").html().replace(/\{REPLACE_ME\}/gi,'<b>{REPLACED}</b>');
                             // see here^^^__________^^^^    

$("body").html(replaced);

<强> see updated fiddle

Answer 3

var replaced = $("body").html().replace(/[^>]{REPLACE_ME}[^<]*/gi, '<b>{REPLACED}</b>');
$("body").html(replaced);

用jQuery选择性地用HTML替换文本

3 个答案: