Question

如果我有一个div包含的字词，请执行以下操作：

<div class="content">
    In condimentum facilisis porta. Sed nec diam eu diam mattis porta viverra.
</div>

如何查找单词的每个实例，例如porta，并用标记包装，以便它变为：

<div class="content">
    In condimentum facilisis <span class="highlight">porta</span>. Sed nec diam eu diam mattis <span class="highlight">porta</span> viverra.
</div>

我看过各种各样的例子，我认为这是正确的：

var elem = $(".content");
elem.text(elem.text().replace("porta", "######"));

但是这种情况偶尔会失败，并且不会取代每个实例。我也想远离使用REGEX，因为它太麻烦而且不应该使用。

Answer 1

尝试：

$('.content').html($('.content').html().replace(/(porta)/g,'<span class="highlight">$1</span>'));

请参阅：Demo jsFiddle

Answer 2

在各种情况下，在元素中包装单词变得困难。简单的案例是你有简单的文字内容：

<div>foo bar foo</div>

然后将“foo”包装在B元素中可以像：

div.innerHTML = div.textContent.replace(/(foo)/g,'<b>$1<\/b>');

但是，如果您有以下内容，生活会更加复杂：

<div>foo bar <span>foo</span></div>

上面将删除span（以及div中的任何其他元素）。您可以通过迭代子元素而不是使用textContent（或者适当的innerText）来处理它。

还有一些案例：

<div>foo bar <span>f</span>oo</div>

您可能还需要处理字边界。 “foo”应该在任何地方匹配，还是只作为整个单词匹配？给定

<div>myfoo bar foo</div>

应该{{1}}成为myfoo还是应该被忽略？如果你只想匹配整个单词，那么你需要这样的东西：

my<b>foo</b>

这是通过限制解决方案的适用性（比如仅仅是元素的纯文本内容）来使您的生活更轻松的情况之一，一般的解决方案将非常笨拙。

Answer 3

查看each（）函数：http://api.jquery.com/each/

$( ".content .highlight" ).each(function( ) {
   this.text().replace("porta","###");
});

这可以解决问题......

Answer 4

看看这个解决方案，应该适用于所有文本，并且不使用正则表达式。

var elem = $(".content");
var ar = elem.text().split(' '), newval='';
for (var i=0; i<ar.length; i++){
    if (ar[i].indexOf("porta") == 0) {
        var partial = ar[i].split('porta');
        (partial[1]=="." || partial[1]==",") ? newval+="<div class='highlight'>porta</div>"+partial[1]+" " : newval+=ar[i]+' ';
        }
    else newval+=ar[i]+' ';
}
elem.html(newval);

和jsFiddle - http://jsfiddle.net/u5RxZ/2/

Answer 5

function highlighter = (string,val){
    String.prototype.splice = function(start, delCount, newSubStr) {
        return this.slice(0, start) + newSubStr + this.slice(start + Math.abs(delCount));
    };
    var spanBegin = "<span class='highlight'>";
    var spanEnd = "</span>";
    var search_regexp = new RegExp(val, "gi");
    var myArray;
    var indexCollection = [];
    while ((myArray = search_regexp.exec(string)) !== null) {
        indexCollection.push(myArray.index);
    }

    indexCollection.forEach(function(stringIdx,idxInCol,col){
        var offset1 = (idxInCol * (spanBegin.length + spanEnd.length));
        var offset2 = stringIdx + offset1 + val.length + spanBegin.length;
        string = string.splice((stringIdx + offset1),0,spanBegin);
        string = string.splice(offset2,0,spanEnd);
    });

    return string;
}

在标签中包装所有单词实例？

5 个答案: