Question

我在以下问题上挣扎了很长时间（看起来很简单）。我希望在不破坏任何事件的情况下更改双花括号之间的单词。

困难在于我不知道发生了什么事件。因此background-color上的span只是一个示例，但可以是任何内容。

这是我的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')
    );

Answer 1

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

$("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>

Answer 2

你能做的是：

<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进行更有针对性的替换，你可能会更好吗？

如何在不破坏任何事件的情况下使用jQuery（或普通JS）替换文本？

2 个答案: