Question

我正在尝试将字符串中的每个字符换成跨度，但保留格式。我几乎就在那里，但是通过以下解决方案，标签后面的标点字符不会包含在任何地方。我面临的另一个问题是正则表达式只拾取标签内的第一个单词（如果有多个单词）。

请看下面（和JS小提琴：https://jsfiddle.net/um650ma0/4/）。

HTML Lorem ipsum dolor坐 amet ，consectetur adipiscing elit 。 Nunc rhoncus吃了一个cursus porta。 Curabitur egestas urna eu arcu tristique，nec malesuada est efficitur。

JS

$('p.home strong').each(function () {
    var strong = $(this).html();
    $(this).empty();
    for (var i = 0; i < strong.length; i++) {
        $(this).append('<span>' + strong[i] + '</span>');
    }
 })
var str = $('p.home').html();
var intro = str.match(/(?:<(\w+)[^>]*>(?:[\w+]+(?:(?!<).*?)<\/\1>?)[^\s\w]?|[^\s]+)/g);
$('p.home').empty();
for (var i = 0; i < intro.length; i++) {
    var str = intro[i];
    if (str.indexOf('<') !== -1) {
        $('p.home').append(intro[i] + ' ')
    }
    else {
        var substr = str.split('');
        for (var j = 0; j < substr.length; j++) {
            $('p.home').append('<span>' + substr[j] + '</span>')
        }
        $('p.home').append(' ');
    }        
}

有关如何更新正则表达式以获得正确结果的任何建议吗？

谢谢，即

Answer 1

代码的问题是当strong元素中有多个单词时，在这种情况下，遍历内部字符串时会遇到空格，浏览器将关闭父标记（强）。您需要在代码中对其进行特定处理。

标签之后缺少标点字符的另一个问题也可以用以下逻辑处理。不是很优雅，但会做的工作

        var str = $('p.home').html();
        var intro = str.match(/(?:<(\w+)[^>]*>(?:[\w+]+(?:(?!<).*?)<\/\1>?)[^\s\w]?|[^\s]+)/g);


        $('p.home').empty();
        for (var i = 0; i < intro.length; i++) {
            var str = intro[i];
            if (str.indexOf('<') !== -1) {

                if(str.indexOf(',') === str.length -1)
                {
                   $('p.home').append(str.substr(0, str.length - 1));
                   $('p.home').append('<span>,</span>' + ' ')
                }
                else if(str.indexOf('.') === str.length -1)
                {
                   $('p.home').append(str.substr(0, str.length - 1));
                   $('p.home').append('<span>.</span>' + ' ')
                }
                else
                {
                       $('p.home').append(intro[i] + ' ');
                }



            }
            else {
                var substr = str.split('');
                for (var j = 0; j < substr.length; j++) {

                    $('p.home').append('<span>' + substr[j] + '</span>')
                }
                $('p.home').append(' ');
            }        
        }

         $('p.home strong').each(function () {
            var strong = $(this).html();



            $(this).empty();
            for (var i = 0; i < strong.length; i++) {
                if($.trim(strong[i]) === "")
                {
                       $(this).append("&nbsp;");
                }
                else
                { 
                     $(this).append('<span>' + strong[i] + '</span>');
                }
            }

        })

更新小提琴：https://jsfiddle.net/LkqL0b4x/

用span填充每个字符，但保持HTML格式

1 个答案: