jQuery - 複数の文字列の複数の文字をhtmlスニペットに置き換えます。

Question

さまざまな文字列をスキャンし、特定の文字のすべてをhtmlスニペットに置き換えようとしています。例えば

- 私は、次をスキャンしたいと思います：

<div id="wrapper"> 
    <div>10,000 | 20,000 | 30,000</div> 
    <div>10,000 |: 20,000</div> 
    <div>10,000 :| 20,000</div> 
</div> 

をそして、それが出力として持っている：

<div id="wrapper"> 
    <div>10,000 <span class="single"></span> 20,000 <span class="single"></span> 30,000</div> 
    <div>10,000 <span class="single-wide"></span> 20,000</div> 
    <div>10,000 <span class="wide-single"></span> 20,000</div> 
</div> 

文字を見つけ、その後、他のテキストと置き換えるため、次の作品、同じ文字列内の文字の複数のインスタンスに対しては機能せず、htmlタグを挿入することはできません。任意の洞察力のための

$('#wrapper div').text(function (i, old) { 
    return old 
     .replace(' | ',' single ') 
     .replace(' |: ', ' single-wide ') 
     .replace(' :| ', ' wide-single '); 
}); 

https://jsfiddle.net/s60v8o5x/

感謝。

Answer 1

使用正規表現複数の文字列を置換し、代わりにテキスト

$('#wrapper div').html(function (i, old) { 
    return old 
    .replace(/ \| /g,' <span class="single"</span> ') 
    .replace(/ \|: /g, ' <span class="single-wide"></span> ') 
    .replace(/ :\| /g, ' <span class="wide-single"></span> '); 
}); 

https://jsfiddle.net/dscfnnf0/2/

Answer 2

のHTMLを使用するには、それはあなたFiddle

$('#wrapper div').text(function (i, old) { 
    return old 
    .replace(/ \| /g,' <span class="single"></span> ') 
    .replace(/ \|: /g, ' <span class="single-wide"></span> ') 
    .replace(/ :\| /g, ' <span class="wide-single"></span> '); 
}); 

のために働く場合は、この正規表現&フィドルをお試しください