CODEWITHSUNDEEP
javascriptcss
Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

Applying CSS on a subString using DOM

Here is the JS code in which I am splitting a String using ":" . So a String given by:

Habit #1: Have you established dedicated business checking account(s)?

Would split into:

[0]=Habit #1 and [1]=Have you established dedicated business checking account(s)?

Now I want to apply CSS to [0].

 titles=document.getElementsByClassName("title");    
            for(var i=0;i<titles.length;i++){
            titles[i].innerHTML.split(":")[0].style.cssText="color:aqua;";
            }

Any modification you guys suggest to the existing code?

Upvotes: 0

Views: 90

Answers (3)

Jad Feitrouni
Jad Feitrouni

Reputation: 637

You can replace the fist part of the string like so:

var titles=document.getElementsByClassName("title");
for(var i=0;i<titles.length;i++){
    var blueFoo = titles[i].innerHTML.split(":")[0];
    var text = titles[i].innerHTML;
    var newHTML = text.replace(blueFoo,'<span style = "color:blue">' + blueFoo + '</span>');
    titles[i].innerHTML = newHTML;
        }

Upvotes: 1

Mike
Mike

Reputation: 54

For example:

var titles=document.getElementsByClassName("title");  
titles= "<span>" + titles;
titles=titles.replace(":", ":</span">);
document.getElementsByClassName("title").innerHtml = titles;

I think this could work.

Upvotes: 1

Mike
Mike

Reputation: 54

I think you have to wrap the first characters to the ":" with a <span class=""> and give them a css class.

<p><span class="blue">Habit #1:</span> Have you ... </p>

Mike

Upvotes: 0

Related Questions