Javascript 替换html中的文本并保留事件

我需要在body的html中替换这样一个模式：“{12345，abcd}”，但我不会丢失孩子们的事件。 我试过这个代码：

$("body").html($("body").html().replace(/[{]{1}([\d]+)[,]{1}(.*?)[}]{1}/g, "<span>Code:$1</span> - <span>Text:$2</span>"))

$（“body”）.html（$（“body”）.html（）.replace（/[{]{1}（[\d]+）[，]{1}（.*？[}]{1}/g，“代码：$1-文本：$2”））

但这会杀死元素的所有事件。 我该怎么做？

之所以会发生这种情况，是因为html（）方法处理文本（而不是dom元素），而文本不保存事件侦听器，所以您首先读取文本，然后对其执行某些操作（替换），然后再编写。在这种情况下，由于事件监听器附加到DOM对象（而不是文本），您将失去事件监听器的身份 我认为最好的方法是遍历所有Dome树，找到所有textNode DOM元素，并在每个元素中分别进行替换

您有3个选项：

在IDE中打开相关视图，修改它，然后像绅士一样生成所需的标记

仅选择可包含该字符串的子元素，并替换其textContent，而不是重置整个正文内容

$('.elements').text(function(_, oldText) {
    return oldText.replace('foo', 'bar');
});

替换正文内容并委派所有事件：

$(document).on('event', 'element', fn);

您还可以在绑定事件处理程序之前替换主体的内容。这当然不会破坏未来的事件处理程序

@黑水 如果我像angularJs解析器那样做，这是行不通的，我已经解决了获取所有文本项并搜索正则表达式的问题。 这是我的解决方案：

$("body").find(":not(iframe)").addBack().contents().each(function() {
    if(this.nodeType == 3)
    {
        $(this).first().replaceWith( $(this).text().replace(/[{]{1}([\d]+)[,]{1}(.*?)[}]{1}/g, "<span class='translator' data-code='$1' data-text='$2'>$2</span>"));
    }
});

$（“body”）.find（“：not（iframe）”）.addBack（）.contents（）.each（函数（））{
if（this.nodeType==3）
{
$（this.first（）.replaceWith（$（this.text（）.replace（/[{]{1}（[\d]+）[，]{1}（.*？[}]{1}/g，“$2”）；
}
});

关于我使用这个的信息，我有一个网页翻译映射器。 在我打印“{id，text}”的地方，我用一个span替换它，然后我处理一个特殊事件来启动该框的翻译