javascript - jquery では、1 文字の後にコロンが続くものに一致し、span タグでラップします

Question

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

正規表現で遊んでみましたが、このシナリオの正規表現を理解するのに苦労しています。

Answer 1

試す

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

デモ:フィドル

Answer 2

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

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

jsFiddle デモ

Answer 3

これを試すことができます：

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

もちろん、これはjQueryでのみ機能します。バニラ JavaScript を使用している場合は、コードを更新できるようお知らせください。