使用 jquery，匹配单个字符后跟冒号并换行 span 标记

With jquery, match single character followed by colon and wrap in span tag

本文关键字：换行 标记 span jquery 字符 单个 使用      更新时间：2023-09-26

如果我有以下html：

<p>e: 1-800-hello-49</p>
<p>another line</p>
<p>
    f: 1-800-hello-49
    g: 1-800-hello-49
</p>

我希望能够检测到一行开头的字符后跟冒号，以便获得以下输出：

<p><span>e:</span> 1-800-hello-49</p>
<p>another line</p>
<p>
    <span>f:</span> 1-800-hello-49
    <span>g:</span> 1-800-hello-49
</p>

我尝试过使用正则表达式，但我很难掌握这种情况的正则表达式。

尝试

$('p').html(function(idx, html){
    return html.replace(/'b([a-z]:)/ig, '<span>$1</span>')
})

演示：小提琴

var pattern = /^'s*(.:)/gm;
$('p').html(function(i, $html) {
    return $html.replace(pattern, '<span>$1</span>');
});

jsFiddle 演示

你可以试试这个：

$('p').each(function() {
   var html = $(this).html();
   if(html.charAt(1) == ':')
   {
       $(this).html( '<span>' + html.charAt(0) + '</span>' + html.substr(2) );
   }
});

当然，这仅适用于jQuery。如果您使用香草javascript，请告诉我，以便我可以更新代码。

相关文章：