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> '); 
});