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

试试这个正则表达式和小提琴，如果它适合你小提琴

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