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

使用正則表達式來替代多個字符串，並使用HTML，而不是文本

$('#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

試試這個正則表達式&撥弄它是否適合你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> '); 
});