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

如果我有以下html：

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

e:1-800-hello-49

另一行


f:1-800-hello-49
g:1-800-hello-49

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

<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>

e:1-800-hello-49

另一行


f:1-800-hello-49
g:1-800-hello-49

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

试试

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

$（'p'）.html（函数（idx，html）{
返回html.replace（/\b（[a-z]：）/ig，$1'）
})

演示：

试试看

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

$（'p'）.html（函数（idx，html）{
返回html.replace（/\b（[a-z]：）/ig，$1'）
})

演示：

您可以尝试以下方法：

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

$（'p'）。每个（函数（）{
var html=$（this.html（）；
如果（html.charAt（1）='：'）
{
$（this.html（“”+html.charAt（0）+“”+html.substr（2））；
}
});

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

您可以尝试以下方法：

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

var pattern = /^\s*(.:)/gm;

$('p').html(function(i, $html) {
    return $html.replace(pattern, '<span>$1</span>');
});

$（'p'）。每个（函数（）{
var html=$（this.html（）；
如果（html.charAt（1）='：'）
{
$（this.html（“”+html.charAt（0）+“”+html.substr（2））；
}
});

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

var pattern=/^\s*（.：）/gm；
var pattern = /^\s*(.:)/gm;

$('p').html(function(i, $html) {
    return $html.replace(pattern, '<span>$1</span>');
});

$（'p'）.html（函数（i，$html）{
返回$html.replace（模式，$1'）；
});

var模式=/^\s*（.：）/gm；
$（'p'）.html（函数（i，$html）{
返回$html.replace（模式，$1'）；
});

---

当一个p标记中有两行需要更新时，这将不起作用。当一个p标记中有两行需要更新时，这将不起作用。如果冒号后面是单个字符（如您在正则表达式中使用的那样）然后最好使用子字符串。@Mr_Green查看第三个

p

元素可能有多个实例如果冒号后面是单个字符（正如您在regex中使用的那样），则最好使用子字符串。@Mr_Green查看第三个

p

元素可能有多个实例