{"id":11381,"date":"2024-03-21T15:46:19","date_gmt":"2024-03-21T10:46:19","guid":{"rendered":"https:\/\/codehim.com\/?p=11381"},"modified":"2024-03-21T15:46:19","modified_gmt":"2024-03-21T10:46:19","slug":"highlight-text-to-specific-range-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/","title":{"rendered":"Highlight Text to Specific Range in JavaScript"},"content":{"rendered":"<p>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.<\/p>\n<h2>How to Create Highlight Text To Specific Range In JavaScript<\/h2>\n<p>1. First, you need an HTML element containing the <a href=\"https:\/\/codehim.com\/social-media\/tweet-highlighted-selected-text-with-jquery\/\" target=\"_blank\" rel=\"noopener\">text you want to highlight<\/a>. For example:<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;pre&gt;&lt;code&gt;this is my highlighted code&lt;\/code&gt;&lt;\/pre&gt;<\/pre>\n<p>2. Create a CSS file named <code>styles.css<\/code> and define the styles for highlighting: In the CSS, we define two highlight styles: <code>rangeA<\/code> for red and <code>rangeB<\/code> for yellow.<\/p>\n<pre class=\"prettyprint linenums lang-css\">html {\r\n\tfont-size: 5vmin;\r\n\ttext-align: center;\r\n}\r\n\r\n\r\n::highlight(rangeA) {\r\n  background-color: rgb(255 0 0 \/ 0.5) \/* red *\/\r\n}\r\n\r\n::highlight(rangeB) {\r\n  background-color: rgb(255 255 0 \/ 0.5) \/* yellow *\/\r\n}<\/pre>\n<p>3. Now, let&#8217;s add JavaScript to highlight the desired text ranges.\u00a0It selects the text node within the <code>code<\/code> element and defines two highlight ranges (<code>rangeA<\/code> and <code>rangeB<\/code>), then applies them using CSS.<\/p>\n<pre class=\"prettyprint linenums lang-js\">console.clear()\r\nlet text_node = document.querySelector(&amp;singleQuote;code&amp;singleQuote;).firstChild\r\n\r\nlet highlightA = new Highlight()\r\nlet rangeA = new Range()\r\nrangeA.setStart(text_node, 0)\r\nrangeA.setEnd(text_node, 15)\r\nhighlightA.add(rangeA)\r\nCSS.highlights.set(&amp;singleQuote;rangeA&amp;singleQuote;, highlightA)\r\n\r\nlet highlightB = new Highlight()\r\nlet rangeB = new Range()\r\nrangeB.setStart(text_node, 10)\r\nrangeB.setEnd(text_node, 25)\r\nhighlightB.add(rangeB)\r\nCSS.highlights.set(&amp;singleQuote;rangeB&amp;singleQuote;, highlightB)<\/pre>\n<p>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&#8217;s design.<\/p>\n<p>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.<\/p>\n<p>That&#8217;s all! hopefully, You&#8217;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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This code snippet helps you to highlight specific text range in HTML using JavaScript and CSS. It adds color to&#8230;<\/p>\n","protected":false},"author":1,"featured_media":11392,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[97],"tags":[],"class_list":["post-11381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-text-input"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Highlight Text to Specific Range in JavaScript &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Highlight Text to Specific Range in JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Highlight Text to Specific Range in JavaScript &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Highlight Text to Specific Range in JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-21T10:46:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Highlight-Text-to-Specific-Range-in-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Highlight Text to Specific Range in JavaScript\",\"datePublished\":\"2024-03-21T10:46:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/\"},\"wordCount\":231,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Highlight-Text-to-Specific-Range-in-JavaScript.png\",\"articleSection\":[\"Text &amp; Input\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/\",\"name\":\"Highlight Text to Specific Range in JavaScript &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Highlight-Text-to-Specific-Range-in-JavaScript.png\",\"datePublished\":\"2024-03-21T10:46:19+00:00\",\"description\":\"Here is a free code snippet to create a Highlight Text to Specific Range in JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Highlight-Text-to-Specific-Range-in-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Highlight-Text-to-Specific-Range-in-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Highlight Text to Specific Range in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Text &amp; Input\",\"item\":\"https:\/\/codehim.com\/category\/text-input\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Highlight Text to Specific Range in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Highlight Text to Specific Range in JavaScript &#8212; CodeHim","description":"Here is a free code snippet to create a Highlight Text to Specific Range in JavaScript. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Highlight Text to Specific Range in JavaScript &#8212; CodeHim","og_description":"Here is a free code snippet to create a Highlight Text to Specific Range in JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-21T10:46:19+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Highlight-Text-to-Specific-Range-in-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Highlight Text to Specific Range in JavaScript","datePublished":"2024-03-21T10:46:19+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/"},"wordCount":231,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Highlight-Text-to-Specific-Range-in-JavaScript.png","articleSection":["Text &amp; Input"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/","url":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/","name":"Highlight Text to Specific Range in JavaScript &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Highlight-Text-to-Specific-Range-in-JavaScript.png","datePublished":"2024-03-21T10:46:19+00:00","description":"Here is a free code snippet to create a Highlight Text to Specific Range in JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Highlight-Text-to-Specific-Range-in-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Highlight-Text-to-Specific-Range-in-JavaScript.png","width":1280,"height":960,"caption":"Highlight Text to Specific Range in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/text-input\/highlight-text-to-specific-range-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Text &amp; Input","item":"https:\/\/codehim.com\/category\/text-input\/"},{"@type":"ListItem","position":3,"name":"Highlight Text to Specific Range in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":444,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=11381"}],"version-history":[{"count":4,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11381\/revisions"}],"predecessor-version":[{"id":11413,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11381\/revisions\/11413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/11392"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=11381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=11381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=11381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}