'Add css style to a specific text using jquery

How to add style to a particular text or characters within a div? 

<div class="test">blocks of texts here.</div>

I want to add color to the word "texts" without using any tags such as span to enclose it. Thanks in advance.

jquerycss


Solution 1:[1]

You can use the following function to style any word in text:

function style_word(text_id, word, css_style) {
    html = $('#' + text_id).html();
    replace = word;
    re = new RegExp(replace,"gi");
    $('#' + text_id).html(html.replace(re, "<span style='" + css_style + "'>" + word + "</span>"));
    }

Simply target the element that contains the text, choosing the word to style and the css styling of choice.

Here is an example:

<div id='my_words'>
There is little doubt that stack overflow has become the de facto method of building software. There is no other way to ensure we are not reinventing the wheel, and benefiting from the power of massive collaboration and variation. A network of contributing individuals will always produce the most optimal solution, and this cannot be matched by the singular efforts of an individual.
</div>

Usage: 

style_word('my_words', 'software', 'color: hotpink')

Results:

enter image description here

style_word('my_words', 'software', 'font-style: italic')

enter image description here

It also supports passing multiple styles in one call: 

style_word('my_words', 'software', 'font-size: 24px; color: blue; font-weight: bold; font-style: italic')

enter image description here

Solution 2:[2]

I personally would wrap the words within a span element. 

<div class="test">blocks of <span id="blueText">texts</span> here.</div>

Then you can call

$("#blueText").css('color', 'blue');

Solution 3:[3]

Well, you can't.

But it is a good question: aaronk6 asked why wouldn't you wrap the word in a span, and the reason is that CSS is a tool to separate content and appearance, so this is precisely what it should be used for. Also, you might find yourself in a situation where you can edit the CSS but has no access to the html.

There's a great article by Chris Coyier on this issue, calling for some extra CSS selectors that would come in handy for that.

That being said, the solution by Cybernetic is great (kudos)! If you are to make such alterations in the file, and can't (or won't) touch the html, javascript is the way to go. But instead of hardcoding the CSS rules, I propose you just give it a span with a class, and make the rules in your external CSS file. The code would go:

function style_word(text_element, word_to_style) {
    html = text_element.html();
    classID = "style-"+word_to_style;
    re = new RegExp(word_to_style,"gi");
    new_html = html.replace(re, "<span class='"+classID+"'>"+word_to_style+"</span>");
    text_element.html(new_html);
    }

So, if you wanted to change only "bar" in <p>foo bar</p>, you'd call:

style_word( $("p"), "bar" ); //jQuery element, then word inside

And then add a CSS rule:

.style-bar{
    color: #123;
}

PS.: Sorry this is not a comment on Cybernetic post... I'm not allowed to comment yet.

Solution 4:[4]

Here's what worked for me...

var textcontent="";
$("p").each(function(){
if ($(this).html().indexOf("THESTRING") >= 0)
{
var textcontent = $(this).html().replace(/THESTRING/gi, '<span class="tomato">THESTRING</span>');
$(this).html(textcontent);
    
}
});

Solution 5:[5]

$(".test").css("color","white");

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 CaptainOfTheSky
Solution 3 isacvale
Solution 4 Ollie Brooke
Solution 5 Andy

Related Questions