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

added 7 characters in body

edited Jul 21, 2022 at 11:15

1
1

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

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

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>

improved

Source Link

edited Jul 21, 2022 at 11:11

Naci Er

1
1

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; 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(child.parentNodeheadline.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>

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; 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(child.parentNode.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>

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

fixed grammar

Source Link

edited Jul 21, 2022 at 11:07

Naci Er

1
1

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 beacousebecause does not change anything except the content textalter any non-text html element.

var keyword = "FREE"; var headline = document.getElementById("headline"); var highlight; 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(child.parentNode.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>

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 beacouse does not change anything except the content text.

var keyword = "FREE"; var headline = document.getElementById("headline"); var highlight; 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(child.parentNode.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>

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; 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(child.parentNode.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>

Added non text id="FREE" to show that this method is safe.

Source Link

edited Jul 21, 2022 at 11:04

Naci Er

1
1

Loading

Source Link

answered Jul 21, 2022 at 10:55

Naci Er

1
1

Loading

Collectives™ on Stack Overflow

Return to Answer