Highlight Text to Specific Range in JavaScript

Highlight Text to Specific Range in JavaScript
Code Snippet:Range() and Highlight() can overlap
Author: Bart Veneman
Published: March 21, 2024
Last Updated: March 21, 2024
Downloads: 51
License: MIT
Edit Code online: View on CodePen
Read More

This code snippet helps you to highlight specific text range in HTML using JavaScript and CSS. It adds color to selected text portions. It helps emphasize or categorize content visually.

How to Create Highlight Text To Specific Range In JavaScript

1. First, you need an HTML element containing the text you want to highlight. For example:

<pre><code>this is my highlighted code</code></pre>

2. Create a CSS file named styles.css and define the styles for highlighting: In the CSS, we define two highlight styles: rangeA for red and rangeB for yellow.

html {
	font-size: 5vmin;
	text-align: center;
}


::highlight(rangeA) {
  background-color: rgb(255 0 0 / 0.5) /* red */
}

::highlight(rangeB) {
  background-color: rgb(255 255 0 / 0.5) /* yellow */
}

3. Now, let’s add JavaScript to highlight the desired text ranges. It selects the text node within the code element and defines two highlight ranges (rangeA and rangeB), then applies them using CSS.

console.clear()
let text_node = document.querySelector(&singleQuote;code&singleQuote;).firstChild

let highlightA = new Highlight()
let rangeA = new Range()
rangeA.setStart(text_node, 0)
rangeA.setEnd(text_node, 15)
highlightA.add(rangeA)
CSS.highlights.set(&singleQuote;rangeA&singleQuote;, highlightA)

let highlightB = new Highlight()
let rangeB = new Range()
rangeB.setStart(text_node, 10)
rangeB.setEnd(text_node, 25)
highlightB.add(rangeB)
CSS.highlights.set(&singleQuote;rangeB&singleQuote;, highlightB)

You can easily customize the highlight colors by adjusting the RGBA values in your CSS code. Modify the background-color property within the ::highlight pseudo-elements to achieve the desired color effect. Experiment with different RGBA combinations to find the colors that best complement your website’s design.

To highlight different text ranges, simply adjust the start and end positions of the ranges in your JavaScript code. Use the setStart() and setEnd() methods of the Range object to specify the beginning and ending points of each range.

That’s all! hopefully, You’ve successfully implemented text highlighting to specific ranges using JavaScript and CSS. Feel free to experiment with different ranges and styles to suit your needs.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X