如何在不破坏任何事件的情况下使用jQuery(或纯JS)替换文本

How to replace text using jQuery (or plain JS) without breaking any events?

本文关键字：jQuery 或纯 JS 文本 替换 情况下 事件 任何      更新时间：2023-09-26

我为下面这个问题纠结了很长时间(看起来很简单)。我想在不破坏任何事件的情况下改变双花括号之间的单词。

困难在于我不知道设定了什么事件。所以span上的background-color只是一个例子，但可以是任何东西。

这是我的html: 
<div class="test">foo <span>bar</span> {{ baz }}</div>
这是我的JS: 
$("span").
    css('background-color', 'red').
    click(function(){
       alert('Clicked bar!'); 
    });
$( ".test" ).
    contents().
    each(function(){
       if( $(this).text().indexOf('{{') !== -1 )
       {
           $(this).
               text().
               replace(/{{'s?([^}]*)'s?}}/, "HOW DO I CHANGE {{ baz }} FOR SOMETHING ELSE WITHOUT BREAKING THE EVENT? THIS DOESN'T WORK");
       }
    });

像下面的例子那样做是行不通的，因为它破坏了span上的动作。

$('.test').
    html( 
        $('.test').
            html().
            replace(/{{'s?([^}]*)'s?}}/, 'baq')
    );

为了保留这些元素，您只需要替换元素中的文本。您可以创建一个函数，该函数循环遍历元素中的节点并替换文本节点中的文本，并使用任何元素调用自己。这样，您就可以替换您想要保留的元素周围的文本，甚至这些元素中的文本:

$("span").
    css('background-color', 'red').
    click(function(){
       alert('Clicked bar!'); 
    });
function replace(el) {
  var c = el.childNodes;
  for (var i = 0; i < c.length; i++) {
    if (c[i].nodeType == 3) {
      c[i].textContent = c[i].textContent.replace(/{{'s?([^}]*)'s?}}/, "Something else");
    } else {
      replace(c[i]);
    }
  }
}
replace($('.test')[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">foo {{ baz }} bar <span>bar {{ baz }} foo</span> foo {{ baz }} foo</div>

你可以做的是:

<div class="test">foo <span class="bar">bar</span> {{ baz }}</div>
jQuery 

$("span").css('background-color', 'red')
$(".test")
    .on("click", "span", function(){
       alert('Clicked bar!'); 
    });
$('.test')
    .html( 
        $('.test')
            .html()
            .replace(/{{'s?([^}]*)'s?}}/, 'baq')
    );

但是，您最好使用baz的特定元素span.baz ?

进行更有针对性的替换。
相关文章：