Home Web Development JavaScript JavaScript Highlight Text With HTML And CSS | Find Text & Highlight

JavaScript Highlight Text With HTML And CSS | Find Text & Highlight

June 28, 2019

6769

How we can create a program that finds text & highlights them? Solution: JavaScript Highlight Text With HTML And CSS, Find Text & Highlight.

I am sure that you have seen find and highlight text in many places. If you are seeing this post from a desktop or laptop then you can find and highlight text or alphabets by pressing Ctrl+F. This a feature of your browser, the same thing will happen in this program.

Today you will learn to create how to find text or words from the paragraph on the webpage. This will be not working with the keyboard shortcut, I will work when you type text on input. Basically, There will an input field to search text, words, or alphabets, when you will type on that field then the matching contents will highlight.

So, Today I am sharing JavaScript Highlight Text With HTML & CSS. In other words, Find text from paragraph & highlight that using HTML, CSS, & JavaScript. I did not use any library for creating this, This is a good example of using HTML CSS & JS in a better way. It has fewer lines of code in every section, after understanding this you can use it on your website easily.

If you are thinking now how this Text or Word Highlighter actually is, then see this preview given below.

Preview Of Find Text & Highlighter

See this video preview to getting an idea of how this highlighter looks like.

Now you can see this visually. If you like this then get the source code of its.

JavaScript Highlight Text With HTML And CSS Source Code

As always before sharing source code, let’s talk about this. I have just created an input field for search texts & a demo paragraph in the HTML section. I take dummy text Lorem Ipsum for this make this quicker. In CSS I put all the positions, colors, & other styles. I have used a google font for paragraph and heading, I also used the same font in input placeholder.

The concept is when you type or place some texts or words in the input field then it will search for that if any result match according to input then it will highlight. This function is built with JavaScript, the JS code also has fewer lines and it is easy to understand. For read pattern & understanding the paragraph I used JavaScript RegExp, This is a regular expression is an object that describes a pattern of characters.

After that, for fetching text of paragraphs and input field, I used document.querySelector. The program is working like when we search for any text then it finds the matching contents If any word or text match, then JavaScript creates a span with class= "highlight". In CSS I added background color yellow for highlight class.

That’s it the whole program’s concept. Now there is nothing to explain more, after getting the codes you will understand properly. If you got any trouble to create this, then you can ask me for a solution.

For creating this Text Highlight Program, you have to create 3 files. First for HTML, second for CSS & third for JavaScript. Follow these steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>Text Find &amp; Highlight | Webdevtrick.com</title>
  
  
  <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">

      <link rel="stylesheet" href="style.css">

  
</head>

<body>

  <header>
  <h1>Search Any Text To Highlight</h1>
</header>
<main>
  <input id="input-text" type="text" placeholder="Type Here" />
  <p id="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta ante et enim molestie porta. Aenean sit amet justo turpis. Nam sed porta augue, quis ullamcorper ligula. Nam ornare, nisi sed dignissim euismod, mi ante dictum tortor, ut ornare orci risus at sem. Nullam a ullamcorper nisl. Pellentesque placerat libero eget lacinia porta. Vestibulum nec suscipit odio. Donec lacinia elit quis est dignissim viverra. Donec feugiat est eu orci pellentesque, a porttitor magna scelerisque. Morbi ullamcorper ultricies luctus.

Vivamus non mi leo. Ut placerat, ex nec suscipit rutrum, nisi lectus vestibulum nulla, in fringilla tellus nulla ac nulla. Vestibulum sem ipsum, sollicitudin non sagittis ut, posuere eu urna. Maecenas at euismod elit, ac interdum nisi. Quisque rutrum magna eu ante viverra, eget laoreet lorem eleifend. Donec at odio odio. Donec euismod velit nisi, ut hendrerit ex feugiat sed. Etiam varius, lacus vitae blandit bibendum, nulla libero semper purus, in rutrum augue nulla vitae ligula. Donec quis gravida felis, a malesuada nunc. Ut sit amet placerat ante. In nunc felis, pellentesque at euismod sed, volutpat quis magna. Maecenas aliquam malesuada eros, placerat ultricies tellus semper nec. In neque ante, varius a accumsan sit amet, rutrum non neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris felis mi, rutrum nec lorem non, lacinia hendrerit metus. Donec posuere feugiat ex eget rutrum.

Curabitur pretium tincidunt elementum. Fusce euismod imperdiet libero, a tempor orci gravida ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas finibus, eros a vestibulum volutpat, diam ligula bibendum ante, ut rhoncus eros risus id est. Aenean placerat nibh quam, in tempor ipsum lacinia nec. Sed maximus eleifend nibh, interdum consequat orci dapibus ullamcorper. In facilisis finibus dolor, varius pulvinar erat interdum tempus.
  </p>
</main>
	<script  src="function.js"></script>
	
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Text Find & Highlight | Webdevtrick.com</title>

</head>

<body>

<h1>Search Any Text To Highlight</h1>

</header>

<main>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta ante et enim molestie porta. Aenean sit amet justo turpis. Nam sed porta augue, quis ullamcorper ligula. Nam ornare, nisi sed dignissim euismod, mi ante dictum tortor, ut ornare orci risus at sem. Nullam a ullamcorper nisl. Pellentesque placerat libero eget lacinia porta. Vestibulum nec suscipit odio. Donec lacinia elit quis est dignissim viverra. Donec feugiat est eu orci pellentesque, a porttitor magna scelerisque. Morbi ullamcorper ultricies luctus.

Vivamus non mi leo. Ut placerat, ex nec suscipit rutrum, nisi lectus vestibulum nulla, in fringilla tellus nulla ac nulla. Vestibulum sem ipsum, sollicitudin non sagittis ut, posuere eu urna. Maecenas at euismod elit, ac interdum nisi. Quisque rutrum magna eu ante viverra, eget laoreet lorem eleifend. Donec at odio odio. Donec euismod velit nisi, ut hendrerit ex feugiat sed. Etiam varius, lacus vitae blandit bibendum, nulla libero semper purus, in rutrum augue nulla vitae ligula. Donec quis gravida felis, a malesuada nunc. Ut sit amet placerat ante. In nunc felis, pellentesque at euismod sed, volutpat quis magna. Maecenas aliquam malesuada eros, placerat ultricies tellus semper nec. In neque ante, varius a accumsan sit amet, rutrum non neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris felis mi, rutrum nec lorem non, lacinia hendrerit metus. Donec posuere feugiat ex eget rutrum.

Curabitur pretium tincidunt elementum. Fusce euismod imperdiet libero, a tempor orci gravida ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas finibus, eros a vestibulum volutpat, diam ligula bibendum ante, ut rhoncus eros risus id est. Aenean placerat nibh quam, in tempor ipsum lacinia nec. Sed maximus eleifend nibh, interdum consequat orci dapibus ullamcorper. In facilisis finibus dolor, varius pulvinar erat interdum tempus.

</p>

</main>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
html, body {
	margin: 0; 
}
body {
  background-color: #fff;
  color: #333;
  font-family: 'Quicksand', sans-serif;

}
header h1 {
  text-align: center;
  font-weight: normal;
  margin-top: 50px;
}
main {
  width: 50%;
  margin: 0 auto;
}
main input[type="text"] {
  color: #FBC300;
  background-color: #333;
  font-family: 'Quicksand', sans-serif;
  display: block;
  margin: 0 auto;
  padding: 5px;
}
main p {
  margin: 10px 0;
  letter-spacing: 1px;
  text-align: justify;
}
.highlight { 
	background-color: #FBC300; 
}

/** code by webdevtrick ( https://webdevtrick.com ) **/

html, body {

margin: 0;

}

body {

background-color: #fff;

color: #333;

font-family: 'Quicksand', sans-serif;

}

header h1 {

text-align: center;

font-weight: normal;

margin-top: 50px;

}

main {

width: 50%;

margin: 0 auto;

}

main input[type="text"] {

color: #FBC300;

background-color: #333;

font-family: 'Quicksand', sans-serif;

display: block;

margin: 0 auto;

padding: 5px;

}

main p {

margin: 10px 0;

letter-spacing: 1px;

text-align: justify;

}

.highlight {

background-color: #FBC300;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
(() => {

  function toRegExp(text) {
    return new RegExp(text, 'g');
  }

  function toSpan(text, className) {
    return '<span class="' + className + '">' + text + '</span>';
  }

  const input = document.querySelector('#input-text');
  const text = document.querySelector('#text');
  const content = text.textContent;

  input.addEventListener('input', e => {
    text.textContent = content;
    let string = e.target.value;

    if (string.length > 0) {
      text.innerHTML = text.textContent.replace(toRegExp(string), toSpan(string, 'highlight'));
    }
  });

})();

/** code by webdevtrick ( https://webdevtrick.com ) **/

(() => {

function toRegExp(text) {

return new RegExp(text, 'g');

}

function toSpan(text, className) {

return '<span class="' + className + '">' + text + '</span>';

}

const input = document.querySelector('#input-text');

const text = document.querySelector('#text');

const content = text.textContent;

input.addEventListener('input', e => {

text.textContent = content;

let string = e.target.value;

if (string.length > 0) {

text.innerHTML = text.textContent.replace(toRegExp(string), toSpan(string, 'highlight'));

}

});

})();

That’s It. Now you have successfully Created JavaScript Highlight Text, Find and Highlight Text using HTML CSS & JavaScript. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

2 COMMENTS

Mikael Elmblad February 6, 2021 At 12:16 pm

Cool! I made a demo for this one too: https://codepen.io/Tcip/full/zYoqBrz

Reply
Fidel January 23, 2022 At 4:57 pm

This is garbage, the highlighting breaks on the first ( basic bracket

Reply

JavaScript Highlight Text With HTML And CSS | Find Text & Highlight

Preview Of Find Text & Highlighter

JavaScript Highlight Text With HTML And CSS Source Code

2 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY