javascript - 在 span 元素中换行文本

Question

我尝试根据 data-text 在 span 中包装一些文本。

例如，如果我有这段代码:

<div data-text="world">Hello World We Love JavaScript</div>

我想这样包装它:

<div data-text="world">Hello <span>World</span> We Love JavaScript</div>

我曾尝试使用 jQuery 的 replace() 方法来解决这个问题，但我还没有找到正确的解决方案:

$("div").text(function (index, text) {
    return text.replace($("div").data("text"), "<span>" + $("div").data("text") + "</span>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-text="Hello">Hello <span>World</span> We Love JavaScript</div>

Answer 1

使用html()带有回调的方法，并使用带有 word boundary 的属性值生成正则表达式(只匹配确切的词)用包裹的范围替换词。

$('div[data-text]').html(function(_, htm) {
  return htm.replace(new RegExp('\\b' + $(this).data('text') + '\\b', 'ig'), '<span>$&</span>')
})

div span {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-text="Hello|love">Hello World We Love JavaScript</div>