CODEWITHSUNDEEP
javascriptjqueryhtmlstringtext
Universal Grasp
Universal Grasp

Reputation: 1845

jQuery text html manipulation to find occurences of a char in a multitude of text then change it's color

I got this 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>

Am told to, using jQuery, select all | and give them color red.

I tried something like:

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

This converts everything to a single Red |

of course this without jQuery would otherwise be easy, just clothing each | with spans... but how would you do it using jQuery with as minimal codes as possible?

Any help?

Upvotes: 0

Views: 82

Answers (2)

Jai
Jai

Reputation: 74738

Everything is correct except you forgot to place global match parameter"g" in the regex:

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

final code should be:

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

Fiddle

Upvotes: 1

rjdmello
rjdmello

Reputation: 863

Change your script as below

http://jsfiddle.net/xHasy/

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

Upvotes: 1

Related Questions