堆棧內存溢出
  簡體   English   中英

使用jQuery從文本區域搜索單詞

[英]search words from text area using jquery

 原文  2015-10-03 08:13:09  9   1    javascript/ jquery/ html/ ajax

問題描述

我正在嘗試在文本區域中搜索一些單詞。 這些詞取自不同的文本框。 它工作正常，但是當我搜索具有某些常用名稱的單詞（如nokia lumia和nokia lumia 310）時，它並沒有給我完美的結果。 我想搜索完整的句子，然后鎖定該句子，這樣它就不會在其他搜索中使用。

在此處輸入圖片說明

在這張圖片中，我們有多個單詞要搜索，但是只有幾個單詞而不是整個句子。

HTML代碼： 

<!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代碼 

 <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);
}







});

1 個解決方案

解決方案1
 0  2015-10-03 09:39:32

我還沒有使用jQuery熒光筆插件，但是為了迭代每個句子的正則表達式，您可以使用while循環執行類似的操作。 您必須關閉使用嚴格。 

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);



}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在文本區域中搜索指定的文本-jQuery / Javascript 使用jQuery更新文本區域 替換文字區域中的單詞 jQuery從文本中刪除單詞 未使用語音輸入更新搜索文本區域 jQuery從文本區域選擇所有電子郵件 使用jQuery搜索和隱藏文本 jQuery突出顯示搜索詞 使用 jQuery 從文本搜索中縮小 select 選項 使用jQuery獲取要顯示的復選框和文本區域的文本
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM