CODEWITHSUNDEEP
jquerycss
wj R.
wj R.

Reputation: 359

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.

Upvotes: 3

Views: 8979

Answers (6)

Ollie Brooke
Ollie Brooke

Reputation: 62

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);
    
}
});

Upvotes: 0

isacvale
isacvale

Reputation: 647

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.

Upvotes: 0

Cybernetic
Cybernetic

Reputation: 13334

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

Upvotes: 3

balzafin
balzafin

Reputation: 1426

You can't do that without wrapping the text to an element. But you can do the wrapping with jQuery:

var $test = $('.test').html();
$test = $test.replace(/texts/gi, '<span class="tomato">texts</span>');
$('.test').html($test);

http://jsfiddle.net/r36xjzs7/

This will recreate the whole element though, so it's not that efficient.

Upvotes: 5

CaptainOfTheSky
CaptainOfTheSky

Reputation: 106

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');

Upvotes: 0

pBuch
pBuch

Reputation: 1001

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

Upvotes: -1

Related Questions