How to change the styling of all instances of a string/symbol?

Question

Is there some way by which I can change the color of all instances of string or symbol in my case * to red by html or javascript?

Yes, there are many ways to accomplish this. Have you tried anything? — Rob M., Nov 22 '13 at 18:15
Please post examples of the HTML you have and what you would like it to look like. We need more that just "all instances" and you need to show us what you tried already and what didn't work for you. On another note - we are an English only site (we will launch a Portuguese Stack Overflow sometime next year). — Oded, Nov 22 '13 at 18:15
Strings don't have styles, elements do! You need to explain this a lot better. — adeneo, Nov 22 '13 at 18:16

score 2 · Answer 1 · answered Nov 22 '13 at 18:16

2

For example:

$(document.body).html(function(i,val){
    return val.replace(/\*/g,'<span style="color:red;">*</span>');
});

Of course it may break your html syntax.

answered Nov 22 '13 at 18:16

Flash Thunder

11,672
8
47
91

fixed, why for regex? it supposed to replace all, so regex is ok. – Flash Thunder Nov 22 '13 at 18:19
@Oded explain yourself please. `replace('*',...)` would replace only first occurence. – Flash Thunder Nov 22 '13 at 18:23
Regex to parse/replace HTML? Shudder. http://stackoverflow.com/a/1732454/1583 – Oded Nov 23 '13 at 08:27
like I wouldn't say that in answer... but `*` is not used in html that much. – Flash Thunder Nov 23 '13 at 08:41
Thing is, you can't count on that. Embedded JS multiline comments? Embedded CSS selectors? – Oded Nov 23 '13 at 08:49
Thats why I put the note at the end. – Flash Thunder Nov 23 '13 at 11:56

score 0 · Answer 2 · answered Nov 22 '13 at 18:18

Use jQuery:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Depois adicione esse script(After add this script):

<script>
$(document).ready(function(){    
    $("[tag]:contains('*')").each(function () {
        $(this).html($(this).html().replace("*", "<span style='color:red'>*</span>"));
    });
});
</script>

Substitua [tag] pela tag na qual fica o caractere, por exemplo (Replace [tag] for the tag where * is inside, for example):

<script>
$(document).ready(function(){    
    $("p:contains('*')").each(function () {
        $(this).html($(this).html().replace("*", "<span style='color:red'>*</span>"));
    });
});
</script>

Afzaal Ahmad Zeeshan · Answer 3 · 2013-11-22T18:27:22.020

-2

If you want to change the * only, then there are many ways to do that!

<div>Some text * Some</div>

Write the jQuery function as:

$("button").click(function () { // on a button click
   $("div").html($("div").text().replace("*", "<span class='color'>*</span>"));
});

After adding the span to it, use CSS to change the color:

.color {
  color: someval;
}

Phew! I finally came up with a fiddle that works! :D hehehe here it is, http://jsfiddle.net/afzaal_ahmad_zeeshan/PtpGM/1/

edited Nov 22 '13 at 18:27

answered Nov 22 '13 at 18:17

Afzaal Ahmad Zeeshan

15,669
12
55
103

Does nothing: http://jsfiddle.net/j08691/EXB4d/ – j08691 Nov 22 '13 at 18:22
Sorry about that @j08691, now have a look :) – Afzaal Ahmad Zeeshan Nov 22 '13 at 18:27
Doesn't work if there's more than one asterisk: http://jsfiddle.net/j08691/PtpGM/2/ – j08691 Nov 22 '13 at 18:29

score -2 · Answer 4 · answered Nov 22 '13 at 18:21

<div class="header">
<p>My text...</p>
<p>My text...</p>
<p>My text...</p>
<p>My text...</p>
<b>My text...</b>

<div class="body">
<p>My text...</p>

<div class="footer">
<p>My text...</p>
<p>My text...</p>
<p>My text...</p>

<!-- IMPORT JQUERY LIBRAY -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

type="text/javascript">

<script type="text/javascript">
$(document).ready(function(e) {


//CHANGE COLOR FOR RED OF ALL P
 $("p").css("color","red");  
//Function css aplly rules css in all document our especific node
 $(".body p").css("color","black");
$(".body p").css("background","#ccc");
//CHANGE COLOR FOR BLUE OF ALL P IN FOOTER
// .dontforindentificymyclass

    $(".footer p").css("color","blue");
 });

How to change the styling of all instances of a string/symbol?

4 Answers4