search words from text area using jquery

313
November 21, 2016, at 11:04 PM

I am trying to search some words in a textarea. These words are taken from different textboxes. It is working fine but when I search words which have some common name like(nokia lumia and nokia lumia 310) then it is not giving me perfect result. I want to search complete sentence and then lock that sentence, so that it won`t be used in other searches.

In this picture we have multiple words to be searched, but only few of them, not the whole sentence.

HTML CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
 <meta name="" content="">
<link rel="stylesheet"      href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link href="./JS/jquery.highlighttextarea.css" rel="stylesheet">
<script src="./JS/jquery.highlighttextarea.min.js"></script>

 </head>
 <body>
 <div >

 <form method="post" action="">
 <p style="float: left; margin: 3px; margin-top: 0px;">
 <textarea name="textarea" class="text" id="txtara" cols="49" rows="20">          </textarea>
  </p>
 <p class="area">
 <input id="txt1" class="clsdoit" type="text" name="a">
 <label id="lab1"></label>
   </p>
  <p class="area">
   <input id="txt2" class="clsdoit" type="text" name="b">
    <label id="lab2"></label>
  </p>
  <p class="area">
  <input id="txt3" class="clsdoit" type="text" name="c">
  <label id="lab3"></label>
  </p>
  <!--adding new-->
  <p class="area">
  <input id="txt4" class="clsdoit" type="text" name="c">
  <label id="lab4"></label>
  </p>
  <p class="area">
  <input id="txt5" class="clsdoit" type="text" name="c">
  <label id="lab5"></label>
  </p>
  <p class="area">
  <input id="txt6" class="clsdoit" type="text" name="c">
  <label id="lab6"></label>
  </p>
  <p  class="area">
  <input id="txt7" class="clsdoit" type="text" name="c">
  <label id="lab7"></label>
  </p>
  <p  class="area">
 <input id="txt8" class="clsdoit" type="text" name="c">
  <label id="lab8"></label>
 </p>
 <p  class="area">
 <input id="txt9" class="clsdoit" type="text" name="c">
 <label id="lab9"></label>
 </p>
 <p class="area">
 <input id="txt10" class="clsdoit" type="text" name="c">
 <label id="lab10"></label>
 </p>
 <p  class="area">
<input id="txt11" class="clsdoit" type="text" name="c">
<label id="lab11"></label>
</p>
<p  class="area">
<input id="txt12" class="clsdoit" type="text" name="c">
<label id="lab12"></label>
</p>
<input type="hidden"  name="id" value="<?php echo $id; ?>" />
<input type="submit" name="submit" value="Save" />
</form> 

</div>
<style>

.area{
margin-top: 5px; margin-bottom: 5px;
}   
</style>

jquery codes 

 <script>
 $(document).ready(function() {
 doit();
 function   doit()
{
$('#txtara').highlightTextarea('destroy');
var $wrds = [];
var txt1=$('#txt1').val();
if(txt1!="")
 {
 $wrds.push({
color: '#FFFF00',
 words: $('#txt1').val()
});
}
 if($('#txt2').val()!="")
 {
 $wrds.push({color: '#ADF0FF', words: $('#txt2').val()});
 }
if($('#txt3').val()!="")
{
$wrds.push({color: '#ADA0F0', words: $('#txt3').val()});
}
  if($('#txt4').val()!="")
{
$wrds.push({color: '#9fc1f0', words: $('#txt4').val()});
}
 if($('#txt5').val()!="")
{
$wrds.push({color: '#3eb5ac', words: $('#txt5').val()});
}
 if($('#txt6').val()!="")
{
$wrds.push({color: '#e7c4a9', words: $('#txt6').val()});
}
 if($('#txt7').val()!="")
{
$wrds.push({color: '#cee2ad', words: $('#txt7').val()});
}
 if($('#txt8').val()!="")
{
 $wrds.push({color: '#8a6396', words: $('#txt8').val()});
  }
   if($('#txt9').val()!="")
  {
  $wrds.push({color: '#380ced', words: $('#txt9').val()});
  }
 if($('#txt10').val()!="")
 {
 $wrds.push({color: '#4ffb64', words: $('#txt10').val()});
 }
if($('#txt11').val()!="")
  {
 $wrds.push({color: '#9cf3c4', words: $('#txt11').val()});
 }
  if($('#txt12').val()!="")
 {
 $wrds.push({color: '#e64f28', words: $('#txt12').val()});
  }

  $('#txtara').highlightTextarea({
      words: $wrds,
      debug: false,
         caseSensitive: false
  });
 }// END OF DOIT FUNC




 $(document.body).on('keyup', ".clsdoit", function(){
 doit();
 });



    $(".text").on('keyup',function(){
search();
search1();
search2();
search3();
search4();
search5();
search6();
search7();
search8();
search9();
search10();
search11();
});
function setCharAt(str,index,chr) {
        if(index > str.length-1) return str;
        return str.substr(0,index) + chr + str.substr(index+1);
    }
function search(){  
var a = $('#txt1').val().toLowerCase();
var totalcount=0;
var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab1').html(totalcount);
}   



function search1(){ 
var a = $('#txt2').val().toLowerCase();
var totalcount=0;
 var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab2').html(totalcount);
}   
function search1(){ 
var a = $('#txt2').val().toLowerCase();
var totalcount=0;
 var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab2').html(totalcount);
}   
function search2(){ 
var a = $('#txt3').val().toLowerCase();
var totalcount=0;
var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab3').html(totalcount);
}   
function search3(){ 
var a = $('#txt4').val().toLowerCase();
var totalcount=0;
var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab4').html(totalcount);
}   
function search4(){ 
var a = $('#txt5').val().toLowerCase();
var totalcount=0;
 var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab5').html(totalcount);
}   
function search5(){ 
var a = $('#txt6').val().toLowerCase();
var totalcount=0;
var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab6').html(totalcount);
}   
function search6(){ 
var a = $('#txt7').val().toLowerCase();
var totalcount=0;
var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab7').html(totalcount);
}   
function search7(){ 
var a = $('#txt8').val().toLowerCase();
var totalcount=0;
var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab8').html(totalcount);
}   
function search8(){ 
 var a = $('#txt9').val().toLowerCase();
 var totalcount=0;
 var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab9').html(totalcount);
}   
function search9(){ 
var a = $('#txt10').val().toLowerCase();
var totalcount=0;
 var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab10').html(totalcount);
}   
function search10(){    
var a = $('#txt11').val().toLowerCase();
var totalcount=0;
var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab11').html(totalcount);
}   
function search11(){    
var a = $('#txt12').val().toLowerCase();
var totalcount=0;
var value = $('.text').val().toLowerCase();
 var regex = /\s+/gi;
 var wordCount = value.trim().replace(regex, ' ').split(' ').length;
 var values = value.trim().replace(regex, ' ');

 for(var i = 0; i < value.length; i++)
 {
    var index = value.toLowerCase().indexOf(a);
    if(index > 0)
    {
        totalcount++;
        value = setCharAt(value,index, '' );
    }
 }
$('#lab12').html(totalcount);
}



});

Answer 1

I havent used the jquery highlighter plugin but on order to iterate over a regex per sentence you can do something like this with a while loop. You have to turn off use strict.

Var mystr = 'textarea text etc. ..';
 Var reg = RegExp='(^|\\.)([^\\.]*' + '(' + 'nokia' + '|' '    whatever' + '))+', 'g');
While(each = reg.exec(mystr)){
    Var sentence = each[0];
   // use the index position of the reg to relate to the position in the textarea
Console.log(reg.lastIndex);

}
LAST QUESTIONS
All questions
Rent Charter Buses Company
POPULAR ONLINE
jQuery Categories

Responsive table on window resize using jQuery

Openshift fails and stops building node js application, when trying to deploy

Dynamic update with flask error

MySQL regexp how to “if”

Oops, looks like the page is lost. This is not a fault, just an accident [on hold]

READ ALSO
How To add striped or Slant Line to progressbar?
jQuery

How To add striped or Slant Line to progressbar?

i design a Progressbar like.

424
Ruby on Rails updating list with AJAX breaks order
jQuery

Ruby on Rails updating list with AJAX breaks order

I have a list of elements in a certain order. The problem is when I update any element with AJAX this element jumps on the bottom of the list.

320
Calling WCF service from jQuery with Ajax,but the parameters are&#39;nt passed.(ASP.NET)
jQuery

Calling WCF service from jQuery with Ajax,but the parameters are'nt passed.(ASP.NET)

I'm developing Microsoft Visual Studio 2013 Community Edition (WebForms,Visual Basic). .

312
BOOTSTRAP RADIO BUTTON with css skin in 2 different panels doesn&#39;t work
jQuery

BOOTSTRAP RADIO BUTTON with css skin in 2 different panels doesn't work

I have this: https://jsfiddle. net/8p984uc0/.

341