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

 

 

index.html

 

 

<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">$&</mark>');
  $box.innerHTML = newText;
});

</script>

Leave a Reply