3

私がこのdivを持っているとしましょう：

<div> Let's say these are the words in my div </div>

この方法で、div内のすべての単語をスパンにラップできることを知っています

$("div").contents().wrap('<span class="wrapper"/>');
//output:  <div><span class="wrapper"> Let's say these are the words in my div</span> </div>

ただし、代わりにこれを実現したいと思います。

<div>
    <span class="wrapper">Let's say these</span>
    <span class="wrapper">are the words</span>
    <span class="wrapper">in my div</span>
</div>

すべての特定の量の単語（この場合：3単語ごと）はグループに分割され、単語の各グループは別々にラップされます。

これらは私の最初に頭に浮かぶものです：

text()1）を使用して文字列を取得し、split(' ')各要素に単語が含まれる配列を形成することで実現できると思います。配列を操作するためのwhileループを記述します。

var a = 0;
var b = array.length;
while (a<b) {
    array[a] = "<span class="wrapper>" +  array[a]";
    a +=2;
    if (a>b) {
        a = b-1;
    }
    array[a] = array[a] + "</span>";
    a++;
}

次に、単に.join('')配列を使用して文字列を形成し、$("div").html(string);

text()2）または、 ：で取得した後、正規表現を使用することもできます。

を含む式のグローバル検索を実行しますa word + a space + a word + a space + another word

/(\w+\s+\w+\s+\w+)/g

スパンで包んだものと交換してください

<span>$1</span>

そして、もしあれば、奇数のものをhtml()実行する前の出力。$("div").contents().eq(2).wrap('<span class="wrapper"/>')

これらは私が思いついたものであり、知りたいのですが、これら以外のより良い方法はありますか？

そして、それを達成するための最良の方法（最速で最小のメモリを必要とする）は何ですか？

4

2 に答える 2

3

これはあなたが望むことをするはずです：

デモはこちら: http://jsfiddle.net/UQk7r/

$("div").each(function() {
    var out = [];
    var words = $(this).text()..trim().split(' ');
    for (var i = 0; i < words.length; i += 3) {
        out.push('<span class="wrapper">' + words.slice(i, i+3).join(' ') + '</span>');
    }
    $(this).html(out.join(' '));
});

DOM バージョン (jQuery なし) は次のとおりです。

デモはこちら: http://jsfiddle.net/cCege/2/

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    var out = [];
    var words = divs[i].innerText.trim().split(' ');
    for (var j = 0; j < words.length; j += 3) {
        out.push('<span class="wrapper">' + words.slice(j, j+3).join(' ') + '</span>');
    }
    divs[i].innerHTML = out.join(' ');
}

最後に、これがDOM + RegExバージョンです...これが最適なパフォーマーになるはずです:

デモ: http://jsfiddle.net/Xgm5q/1/

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    divs[i].innerHTML = '<span class="wrapper">' 
            + divs[i].innerText.trim().replace(/(([^\s]+\s+){2}[^\s]+)\s+/g, '$1</span> <span class="wrapper">')
            + '</span>';
}​
于 2012-12-07T05:42:34.110 に答える
3

パフォーマンスの場合:

var elems = document.getElementsByTagName('div');

for (var j=elems.length; j--;) {
    var txtArr = elems[j].textContent.replace(/([a-zA-Z]+)\s([a-zA-Z]+)\s([a-zA-Z]+)/g, '$1 $2 $3* ').split('*'),
        txtElm = document.createDocumentFragment(),
        span   = document.createElement('span');

    for (i=0; i<txtArr.length; i++) {
        if (/\S/.test(txtArr[i])) {
            var sp   = span.cloneNode(true),
                text = document.createTextNode(txtArr[i]);

            sp.appendChild(text);
            txtElm.appendChild(sp);
        }
    }

    elems[j].innerHTML = '';
    elems[j].appendChild(txtElm)
}
​

フィドル

于 2012-12-07T06:18:20.953 に答える