I am having trouble adding an input to find words in element [on hold]

349
January 08, 2017, at 10:15 PM

I found this code which would find a word in an element. I tried to add an input to it, so I could type a word that I wanted to find.

Here is my code

$(document).ready(function() { 
  var sentences = document.querySelector('#sentences'); 
  $("#btn").click(function() { 
    var searchValue = $("#search").val(); 
    find_word(searchValue); 
  }); 
  var keywords = document.querySelector($("#search").val()); 
  function find_word(event) { 
    var target = event.target; 
    var text = sentences.textContent; 
    var regex = new RegExp('(' + target.textContent + ')', 'ig'); 
    text = text.replace(regex, '<span class="highlight">$1</span>'); 
    sentences.innerHTML = text; 
  }, false); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<div id="keywords"> 
  <input id="search" type="text" /> 
  <button id="btn">btn</button> 
</div> 
<div id="sentences"> 
  <table> 
    <tr> 
      <td>This is an example.</td> 
      <td>An example is shown here.</td> 
      <td>Here is another example.</td> 
    </tr> 
  </table> 
</div>

Hopefully you can see what I am trying to do here. Thanks for any help! P.S some things here I haven't seen before as I copied the code and have changed some parts.

Answer 1

There are few issues

1: you are mixing up jQuery and javascript syntax for selector.

2: you are passing searchvalue in find_word() but receiving it as event.

Try the below code for the desired functionality.

$(document).ready(function() { 
var sentences = $('#sentences'); 
$("#btn").click(function() { 
   var searchValue = $("#search").val(); 
   find_word(searchValue); 
}); 
 
 
function find_word(searchValue) { 
 var text = sentences.text();  
 text = text.replace(new RegExp('('+searchValue+')', 'gi'),'<span class="highlight">$1</span>'); 
sentences.html(text); 
} 
 
});
.highlight 
{ 
  background-color:yellow; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="keywords"> 
<input id="search" type="text" /> 
<button id="btn"> 
  btn 
</button> 
</div> 
<div id="sentences"> 
<table> 
  <tr> 
    <td>This is an example.</td> 
    <td>An example is shown here.</td> 
    <td>Here is another example.</td> 
  </tr> 
</table> 
</div>

READ ALSO
How to fix Arabic Font in Safari and FireFox?

How to fix Arabic Font in Safari and FireFox?

I have a font that is @import from google fonts in my css file

420
Change an !important property using JavaScript/jQuery

Change an !important property using JavaScript/jQuery

So I've already got the text color of a select box set with an !important value and am struggling to change it again using jQuery

404
removing content from title bar in ext js

removing content from title bar in ext js

I m using ext js 6 with sencha cmd, when I use title header in ext js, it autogenerate the css class with content: 'd' like one in below screenshot in many places

749
What does it means &ldquo;use 1140px bootstrap grid&rdquo;?

What does it means “use 1140px bootstrap grid”?

I have a part-time job and I must code a websiteI've got a graphics and graphical overview in

393