Javascript - How to style specific word in a string of text?

Question

I have a string of text here that will be dynamically generated to be one of the following:

<h1 id="headline">"Get your FREE toothbrush!"</h1> OR <h1 id="headline">"FREE floss set and dentures!"</h1>

Since this will be dynamically generated I won't be able to wrap a <span> around the word "FREE" so I want to specifically target the word "FREE" using Javascript so that I can style it with a different font-family and font-color than whatever styling the <h1> is set to. What methods do I use to go about doing this?

Does this answer your question? How to highlight text using javascript — Heretic Monkey
– Heretic Monkey, Commented Nov 3, 2020 at 23:13

jla · Accepted Answer · 2020-11-03 23:07:05Z

6

You can search and replace the substring 'FREE' with styled HTML. If 'FREE' occurs more than once in the string you may need to use regex (unless you don't need to support Internet Explorer). See How to replace all occurrences of a string?

In your case:

let str = '<h1 id="headline">"FREE floss set and dentures!"</h1>' str = str.replace(/FREE/g, '<span color="red">FREE</span>');

answered Nov 3, 2020 at 23:07

jla

4,8313 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2864740 Over a year ago

A simple improvement with regex for a word is \bWORD\b

shreyasm-dev Over a year ago

@user2864740 Correct me if I'm wrong, but isn't \bWORD\b just a conciser way to write (?<=(^|\s+))FREE(?=($|\s+))? Doesn't \b target word boundaries?

user2864740 Over a year ago

\b does target word boundaries. It’s not the same though, as the alternate \s form shown would (only) match a space while \bWORD\b would break on a - or ., eg. Compare with the input: “Foo-WORD!”. It comes down to the precise behavior that is desired..

Rod Ramírez · Accepted Answer · 2020-11-03 23:17:42Z

1

The property you are looking for is innerHTML, look the following example:

var word = document.getElementById('word'); function changeWord(){ word.innerHTML = "another"; word.style.backgroundColor = 'black'; word.style.color = 'white'; }

<h1 id="headline"> <span id="word">some</span> base title </h1> <button onClick="changeWord()"> change </button>

edited Nov 3, 2020 at 23:17

answered Nov 3, 2020 at 23:13

Rod Ramírez

1,3981 gold badge15 silver badges28 bronze badges

5 Comments

shreyasm-dev Over a year ago

This does not answer the OP's question. They asked to change only a specific piece of text, while this changes the whole HTML.

shreyasm-dev Over a year ago

They also mention that "[it] will be dynamically generated [so they] won't be able to wrap a <span> around the word "FREE""

shreyasm-dev Over a year ago

To clarify, it might have more than one span

Rod Ramírez Over a year ago

I can't wrap my head around why they wouldn't be able to wrap a <span> around that value. If it's dynamically generated it means that somehow they are able to reference that piece of text

shreyasm-dev Over a year ago

Use querySelectorAll with a for loop or forEach

Aib Syed · Accepted Answer · 2020-11-04 00:21:01Z

Here is a working example using slice and some classic concatenation.

EDIT: Code for the second string is also included now.

//get headline by id var headline = document.getElementById("headline"); //declare your possible strings in vars var string1 = "Get your FREE toothbrush!" var string2 = "FREE floss set and dentures!" //declare formatted span with "FREE" in var var formattedFree = "<span style='color: blue; font-style: italic;'>FREE</span>" //target positions for the rest of your string var string1Position = 13 var string2Position = 4 //concat your vars into expected positions for each string var newString1 = string1.slice(0, 9) + formattedFree + string1.slice(string1Position); var newString2 = formattedFree + string2.slice(string2Position) //check if strings exist in html, if they do then append the new strings with formatted span if (headline.innerHTML.includes(string1)) { headline.innerHTML = newString1 } else if (headline.innerHTML.includes(string2)) { headline.innerHTML = newString2 }

<!-- As you can see the original string does not have "FREE" formatted --> <!-- Change this to your other string "FREE floss set and dentures!" to see it work there as well --> <h1 id="headline">Get your FREE toothbrush!</h1>

Naci Er · Accepted Answer · 2022-07-21 11:15:27Z

You can split the text and convert the keyword "FREE" to a span element. So you can style the keyword "FREE". This method is safe because does not alter any non-text html element.

var keyword = "FREE"; var headline = document.getElementById("headline"); var highlight, index; headline.childNodes.forEach(child => { if (child.nodeType == Node.TEXT_NODE) { while ((index = child.textContent.indexOf(keyword)) != -1) { highlight = child.splitText(index); child = highlight.splitText(keyword.length); with(headline.insertBefore(document.createElement("span"), highlight)) { appendChild(highlight); className = 'highlight'; } } } });

.highlight { /* style your keyword */ background-color: yellow; }

<div id="FREE"> <h1 id="headline">"Get your FREE toothbrush! FREE floss set and dentures!"</h1> </div>

Collectives™ on Stack Overflow

Javascript - How to style specific word in a string of text?

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Linked

Related