3

ネストされたリンクを機能させたまま、段落内のすべての単語をスパンでラップするにはどうすればよいですか? ここから以下のコードを使用すると、私は近づくことができますが、空白で分割すると、aと の間にスパンが挿入され、次のhrefようになります。

<p><span><a< span> <span>href="#"&gt;this</span></a<></span></p>

これにより、明らかにリンクが使用できなくなります。

$('p').each(function() {

var text = $(this).html().split(/\s+/),//split on space
    len = text.length,
    result = []; 

for( var i = 0; i < len; i++ ) {
    result[i] = '<span>' + text[i] + '</span>';
}
$(this).html(result.join(' '));
});

Jsfiddle hereは、おそらく私の主張をよりよく示しています。ありがとう！

4

1 に答える 1

3

問題は、タグを他のタグの"<span>"中にランダムに挿入したくないということです。結果の html like:<img <span>src="blahblah"</span>>は問題になるでしょう。

<span>正規表現を使用して HTML 内のタグを一致させ、他のすべてにのみタグを追加できます。おそらく完璧ではありませんが、次のようなものです。

$('p').each(function() {

    var tagRE = /([^<]*)(<(?:\"[^\"]*\"|'[^']*'|[^>'\"]*)*>)([^<]*)/g,
        match,
        result = [],
        i = 0;

    while(match = tagRE.exec($(this).html())) {
        var text1 = match[1].split(/\s+/),
            len1 = text1.length;

        var text2 = match[3].split(/\s+/),
            len2 = text2.length;

        for(var tIdx = 0; tIdx < len1; tIdx++ )
            result[i++] = '<span>' + text1[tIdx] + '</span>';           

        result[i++] = match[2];

        for(var tIdx = 0; tIdx < len2; tIdx++ )
            result[i++] = '<span>' + text2[tIdx] + '</span>';          
    }

    $(this).html(result.join(' '));

});

http://jsfiddle.net/5wabK/

おそらく少し非効率的ですが、最初のタグの前と最後のタグの後のすべてをキャプチャするために、最初と最後にグループを使用する必要がありました。

于 2012-07-14T17:56:04.353 に答える