title: How to highlight search text in html with the help of js?
body: <p>I am passing a very very hard time with <code>JavaScript</code> and I have zero knowledge with <code>jQuery</code>. I am trying to highlight a text from a page or from a body with the help of <code>JavaScript</code> and <code>jQuery</code>.</p>
  
  <p>With hard try, I manage a search code with highlight.</p>
  
  <p><strong>My HTML code:</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="/javascripts/application.js" type="text/javascript"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      Search: &lt;input type="text" id="text-search" /&gt;
      &lt;p&gt;
          &lt;b&gt;Demo &lt;/b&gt; he new edition of KnowlEdge K12 enables your school with flexibility by wholly automating their administrative and academic processes. With IncTech’s solution for K12 schools, you can. We give you an internal infrastructure so you can share school and student information.
      &lt;/p&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>My full code with jQuery and JavaScript:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>jQuery.fn.highlight = function(pat) {
  
      function innerHighlight(node, pat) {
  
          var skip = 0;
  
          if (node.nodeType == 3) {
  
              var pos = node.data.toUpperCase().indexOf(pat);
  
              if (pos &gt;= 0) {
  
                  var spannode       = document.createElement('span');
                  spannode.className = 'highlight';
                  var middlebit      = node.splitText(pos);
                  var endbit         = middlebit.splitText(pat.length);
                  var middleclone    = middlebit.cloneNode(true);
  
                  spannode.appendChild(middleclone);
                  middlebit.parentNode.replaceChild(spannode, middlebit);
  
                  skip               = 1;
  
              }
  
          } else if (node.nodeType == 1 &amp;&amp; node.childNodes &amp;&amp; !/(script|style) /i.test(node.tagName)) {
              for (var i = 0; i &lt; node.childNodes.length; ++i) {
  
                  i += innerHighlight(node.childNodes[i], pat);
  
              }
  
          }
  
          return skip;
  
      }
  
      return this.each(function() {
  
          innerHighlight(this, pat.toUpperCase());
  
      });
  
   };
  
  jQuery.fn.removeHighlight = function() {
  
      function newNormalize(node) {
  
          for (var i = 0, children = node.childNodes, nodeCount = children.length; i &lt; nodeCount; i++) {
  
              var child = children[i];
  
              if (child.nodeType == 1) {
  
                  newNormalize(child);
                  continue;
  
              }
  
              if (child.nodeType != 3) { continue; }
  
              var next = child.nextSibling;
  
              if (next == null || next.nodeType != 3) { continue; }
  
              var combined_text = child.nodeValue + next.nodeValue;
              new_node          = node.ownerDocument.createTextNode(combined_text);
  
              node.insertBefore(new_node, child);
              node.removeChild(child);
              node.removeChild(next);
              i--;
              nodeCount--;
  
          }
  
      }
  
      return this.find("span.highlight").each(function() {
  
          var thisParent = this.parentNode;
          thisParent.replaceChild(this.firstChild, this);
          newNormalize(thisParent);
  
      }).end();
  
  };
  
  $(function() {
  
      $('#text-search').bind('keyup change', function(ev) {
  
          // pull in the new value
          var searchTerm = $(this).val();
  
          // remove any old highlighted terms
          $('body').removeHighlight();
  
          // disable highlighting if empty
          if ( searchTerm ) {
  
              // highlight the new term
              $('body').highlight( searchTerm );
  
          }
  
      });
  
  });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.highlight {
      background-color: #fff34d;
      -moz-border-radius: 5px; /* FF1+ */
      -webkit-border-radius: 5px; /* Saf3-4 */
      border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
  }
  
  .highlight {
      padding:1px 4px;
      margin:0 -4px;
  }
  </code></pre>
  
  <p>Please don't ask me for any kind of more info. Every thing is given in comment section. Guys please please help me.</p>