jQuery：查找文本并替换为 HTML

Question

我尝试查找和替换文本（使用 jQuery）。实际上，我正在尝试在文本周围添加一个 span 元素。我也应该能够再次删除 span 而不会丢失里面的文本。

例如，假设我有以下情况开始：

<span>This is a span element</span>

我希望能够使用 jQuery/JavaScript 动态地做到这一点：

<span>This is a <span class="marked">span</span> element</span>

我也应该能够删除 span.marked 并返回第一个结果。

但问题是我想对具有多个子项和子项等的容器内的所有文本执行此操作。

到目前为止我得到的代码将执行以下操作，这不是我想要的：

<<span class="marked">span</span>>This is a <span class="marked">span</<span class="marked">span</span> element</span>

我想对页面上的所有文本执行此操作，而不仅仅是找到的第一个文本。

编辑：到目前为止我的代码：

var re = new RegExp(word, 'g');
$('.container').html($('.container').html().replace(re, '<span class="marked">' + word + '</span>'));

word 是一个字符串，其中包含要环绕的文本。

Answer 1

要在 html 中包装搜索字符串，您可以使用以下内容：

$('span:contains("word")').html().replace('word', '<span class="marked">word</span>');

要删除它，您可以使用以下内容：

$('span:contains("word")').html().replace('<span class="marked">word</span>', 'word');

是的，这是一种非常粗略的做法，但应该可以。

编辑： 正如@user3558931 所指出的，这个词需要是一个变量。

要在 html 中包装搜索字符串，您可以使用以下内容：

$('span:contains("' + str + '")').html().replace(str, '<span class="marked">' + str + '</span>');

要删除它，您可以使用以下内容：

$('span:contains("' + str + '")').html().replace('<span class="marked">' + str + '</span>', str);

编辑： 上述代码中的一个小故障，看这个fiddle中的固定代码：http://jsfiddle.net/thePav/7TNk6/21/

Answer 2

$('.container p').each(function() {
    var text = $(this).text();
    $(this).html(text.replace('word', '<strong><span class="accordion">word </span></strong>')); 
});

Answer 3

不要使用正则表达式。使用 DOM 遍历，这将更可靠、更快且破坏性更小（例如，事件处理程序不会被破坏）。

有关简单示例，请参阅https://stackoverflow.com/a/10618517/96100。

或者，您可以使用以下内容：

http://james.padolsey.com/javascript/replacing-text-in-the-dom-solved/

这不包括之后删除跨度，但这是一件相当简单的事情。类似于以下内容（未经测试）：

function replaceWithOwnChildren(el){
    var parent = el.parentNode;
    while (el.hasChildNodes()) {
        parent.insertBefore(el.firstChild, el);
    }
    parent.removeChild(el);
}

// Create a non-live standard array of spans
var spans = [].slice.call(document.getElementsByTagName("span"), 0);
for (var i = 0, len = spans.length; i < len; ++i) {
    if (spans[i].className == "marked") {
        replaceWithOwnChildren(spans[i]);
    }
}

// Glue together any adjacent text nodes
document.normalize();

Answer 4

我认为需要调整正则表达式，使其不会选择 <span 或任何其他 HTML 标记。我想建议 RegExp：

var re = new RegExp('[^<\\/](' + word + ')', 'g');

以及替换：

$('.container').each(function() {
    $(this).html( $(this).html().replace( re, ' <span class="marked">$1</span>' ) );
});

并且可以通过使用代码来反转（点击下面demo中的按钮）：

$('button.undo').on( 'click', function() {
    $('.container').find( 'span.marked' ).each(function() {
        $(this).replaceWith( word );
    });
});

JS FIDDLE DEMO

OTHER DEMO

Answer 5

var mark = function(word){
    返回函数（）{
        this.innerHTML = this.innerHTML.replace(word,'' + word + '');
    }
};
$('span').each(mark('span'));

Answer 6

尝试使用以下方法：

$('.container').forEach(function(){ 
    $(this).html().... 
})

如果那是您的问题。否则，请澄清一下，究竟是什么没有按预期工作？

Answer 7

var span = document.getElementsByTagName("span")[0];
span.innerHTML = span.innerHTML.replace(/span/g, "<span class=\"marked\">span</span>");

http://jsfiddle.net/7TNk6/1/