Question

我尝试将某些文字换算为data-text。

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

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

我想像这样包装：

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

将html()方法与回调一起使用，并使用word boundary的属性值生成正则表达式（仅匹配确切的单词）以用包裹的span替换单词。

＆＃13;

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

＆＃13;

div span {
  color: red
}

＆＃13;

<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>

＆＃13;

Answer 2

您需要设置元素的html而不是text：

$("div").html(function(i,html) {
  return html.replace(/(World)/g, '<span>World</span>');
});

＆＃13;

$("div").html(function(i,html) {
  return html.replace(/(World)/g, '<span>World</span>');
});

＆＃13;

<style>span{color:red}</style>
<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>

＆＃13;

Answer 3

试试此代码http://jsfiddle.net/wQns7/2138/

IEntityListViewModel

在span元素中包装文本

3 个答案: