javascript - jQuery 文本 html 操作以查找大量文本中出现的字符，然后更改其颜色

Question

我懂了HTML

    <div id="oops_menuHldrs" 
        style=" border-top:5px solid #ccc; position:absolute; width:100%;  background:#343434; bottom:0px; left:auto;">

          <div style="position:absolute; background:#343434; border-radius:10px; border:1px solid #CCC; right:0px; top:-20px;  padding:5px;">


<table id="opps_menu_links"  width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><span><a href="../?abt=us">About us</a> black_text | black_text</span></td>
        <td><span><a href="../?ourA=gent">Our Agents</a> black_text | black_text</span></td>
        <td><span><a href="../contact=us">Contact us.</a> black_text | black_text </span></td>
      </tr>
    </table>


 </div>

被告知，使用jQuery，全选|并赋予它们红色。

我试过类似的东西：

$('#opps_menu_links').html( 
        $('#opps_menu_links').text()
        .replace(/\|/,"<span style='color:#f00;'>|</span>"));

这会将所有内容转换为单个红色|

当然，如果没有的话，这jQuery很容易，只需给每个人穿上|……spans但是您将如何使用jQuery尽可能少的代码来做到这一点？

有什么帮助吗？

Answer 1

一切都是正确的，除了您忘记"g"在正则表达式中放置全局匹配参数：

.replace(/\|/g,
//-----------^----place this

最终代码应该是：

$('#opps_menu_links').html( 
        $('#opps_menu_links').text()
        .replace(/\|/g,"<span style='color:#f00;'>|</span>"));
    //---------------^----------place here

小提琴

Answer 2

如下更改您的脚本

http://jsfiddle.net/xHasy/

$('#opps_menu_links').html($('#opps_menu_links').html( ).replace(/\|/g,'<span style="color:red;">|</span>'));