3

在保持任何嵌套链接正常运行的同时,我如何将段落中的每个单词都用一个 span 包裹起来?从这里使用下面的代码我很接近,但是在空格上分割会在ahref结果之间插入一个跨度,结果如下:

<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 如下:将成为一个问题,你是否曾经得到一个。<img <span>src="blahblah"</span>>

您可以使用正则表达式来匹配 HTML 中的标签,并且只将<span>标签添加到其他所有内容。可能并不完美,但类似于:

$('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 回答