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');

これは、ソリューションの適用性を制限することで (たとえば、要素のプレーン テキスト コンテンツのみに) 作業を簡単にすることができるケースの 1 つであり、一般的なソリューションは非常に扱いにくくなります。

于 2013-02-28T04:12:47.430 に答える
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 に答える
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

each() 関数を見てください: http://api.jquery.com/each/

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

これはうまくいく可能性があります...

于 2013-02-28T03:31:07.820 に答える