用span填充段落中的单词，保持嵌套链接正常运行

Question

如何在保持嵌套链接运行的同时用段落包装段落中的每个单词？使用here中的以下代码，我接近了，但是在空白处拆分会在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或许更能说明我的观点。谢谢！

Answer 1

问题是您不想随意在其他标记的中插入"<span>"标记。像<img <span>src="blahblah"</span>>这样的html会成为一个问题，你有没有得到它。

您可以使用正则表达式匹配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/

这可能效率不高但我必须在开头和结尾使用一组来捕获第一个标签之前和最后一个标签之后的所有内容。