3

如果我有一个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，因为它太麻烦了，不应该使用。

4

5 回答 5

3

尝试：

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

请参阅：演示 jsFiddle

于 2013-02-28T03:25:55.410 回答
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>

以上将删除跨度（以及div内的任何其他元素）。您可以通过迭代子元素而不是使用 textContent （或适当的 innerText ）来处理这个问题。

还有像这样的情况：

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

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

<div>myfoo bar foo</div>

应该myfoo成为my<b>foo</b>还是应该被忽略？如果你只想匹配整个单词，那么你需要类似的东西：

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

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

于 2013-02-28T04:12:47.430 回答
0

看看 each() 函数：http ://api.jquery.com/each/

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

这可以解决问题...

于 2013-02-28T03:31:07.820 回答
0

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

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/

于 2013-02-28T03:57:16.530 回答
0 
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;
}
于 2016-03-11T01:53:01.757 回答