Javascript Project to Highlight Matching or Searched Text Using Color by User in HTML5 Paragraph

Hello, friend Javascript Project to Highlight Matching or Searched Text Using Color by User in HTML5 Paragraph article We are going to know the topic clearly. The reason for that is that our friends have a lot of doubts. We hope the doubts will be resolved through this article. Let’s go inside this article.

Javascript Project to Highlight Matching or Searched Text Using Color by User in HTML5 Paragraph

Javascript Project to Highlight Matching or Searched Text Using Color by User in HTML5 Paragraph

<div class="container">
  <div class="search-container">
    <label for="search">Search within quoted text</label>
    <input
      id="search"
      placeholder="Type `web` for example"
      type="search"
      autocomplete="off"
    />
  </div>

  <figure>
    <blockquote id="box" cite="https://en.wikipedia.org/wiki/JavaScript">
      Alongside HTML and CSS, JavaScript is one of the core technologies
      of the World Wide Web. JavaScript enables interactive web pages and
      is an essential part of web applications. The vast majority of
      websites use it for client-side page behavior, and all major web
      browsers have a dedicated JavaScript engine to execute it.`
    </blockquote>
    <figcaption>
      ~ from <cite>Wikipedia</cite>
    </figcaption>
  </figure>
</div>

<style>

@import url('https://fonts.googleapis.com/css?family=Inter|Dosis&display=swap');

/* Crucial */
.highlight {
  background-color: #EEF43B;
}

/* Just for styling */
body {
  font-family: 'Inter', sans-serif;
}

.container {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 960px;
  padding: 0 2%;
}

.search-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 10px auto 20px auto;
  max-width: 450px;
  padding: 0 2%;
}

label {
  color: #535353;
  font-family: 'Dosis', sans-serif;
  font-size: 14px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

input {
  background: #fff;
  border: 1px solid #535353;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  height: 38px;
  line-height: 38px;
  outline: none;
  padding: 0 10px;
  transition: all 0.5s;
  width: 100%;
}

input:focus {
  border: 1px solid #3a5bd3;
  box-shadow: 0 0 4px 0 #7d90de;
}

blockquote {
  background-color: #f1f1f1;
  border-radius: 0 4px 4px 0;
  color: #515151;
  font-style: italic;
  line-height: 1.7;
  margin: 0;
  padding: 20px 60px 20px 20px;
  position: relative;
}

blockquote::before {
  color: #ccc;
  content: '”';
  font-size: 80px;
  position: absolute;
  right: 30px;
  top: -20px;
}

figcaption {
  color: #aaa;
  font-size: 14px;
  font-style: italic;
  margin-bottom: 20px;
  margin-top: 10px;
  text-align: center;
}

</style>

<script>

const $box = document.getElementById('box');
const $search = document.getElementById('search');

$search.addEventListener('input', (event) => {
  const searchText = event.target.value;
  const regex = new RegExp(searchText, 'gi');

  let text = $box.innerHTML;
  text = text.replace(/(<mark class="highlight">|</mark>)/gim, '');

  const newText = text.replace(regex, '<mark class="highlight">

amp;</mark>');
$box.innerHTML = newText;
});

</script>

Read Also: Node.js Prism.js Example to Highlight Source Code Syntax Using node-prismjs Library in Javascript

Final Words

Javascript Project to Highlight Matching or Searched Text Using Color by User in HTML5 Paragraph We hope the article has resolved your doubts. Also, let us know if you have any doubts and we will resolve your doubts.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment