找到并替换为Textarea

Question

任何人都不知道如何做一个查找和替换的东西，当你只需点击下一个它会带你到下一个找到的项目？

编辑：

对于多行文本。我想要一个可以添加查找和替换到Textarea的Javascript代码。我不想使用。

搜索（）

或Replace（）。

此刻我尝试这样的：

function allIndexes() { 
var indices = new Array(); 
var index = 0; 
var i = 0; 
while(index = $('#text').val().indexOf($('#search').val(), index) > 0) { 
indices[i] = index; 
i++; 
} 
return indices; 
} 

但是，这并不在所有的工作。

Answer 1

我更新了我以前的答案，并根据我之前发布的文章所述的方向完成了搜索和替换功能。我在Chrome 14，IE8和Firefox 3.6中测试了这一点。

查找：将选择下一个searchterm实例。

查找/替换：将取代搜索字符串的下一次出现，并选择替换

全部替换：将取代所有出现，并选择已取代过去的一段文字

希望这是现在，你在找什么。你绝对应该能够从这里走出来，并且设计出这样的风格或者制作出适当的课程......

<script src="jquery.js" type="text/javascript"></script>  

<textarea id="txtArea" style="width: 300px; height:100px"> 
    This is a test. A test, i say. The word TEST is mentioned three times. 
</textarea> 

<p> 
    <label for="termSearch">Search</label> 
    <input type="text" id="termSearch" name="termSearch" value="test" /><br/> 
    <label for="termReplace">Replace</label> 
    <input type="text" id="termReplace" name="termReplace" value="solution" /><br/> 
    <label for="caseSensitive">Case Sensitive</label> 
    <input type="checkbox" name="caseSensitive" id="caseSensitive" /><br/> 
    <a href="#" onclick="SAR.find(); return false;" id="find">FIND</a><br/> 
    <a href="#" onclick="SAR.findAndReplace(); return false;" id="findAndReplace">FIND/REPLACE</a><br/> 
    <a href="#" onclick="SAR.replaceAll(); return false;" id="replaceAll">REPLACE ALL</a><br/> 
</p> 

<script type="text/javascript"> 
    var SAR = {}; 

    SAR.find = function(){ 
     // collect variables 
     var txt = $("#txtArea").val(); 
     var strSearchTerm = $("#termSearch").val(); 
     var isCaseSensitive = ($("#caseSensitive").attr('checked') == 'checked') ? true : false; 

     // make text lowercase if search is supposed to be case insensitive 
     if(isCaseSensitive == false){ 
      txt = txt.toLowerCase(); 
      strSearchTerm = strSearchTerm.toLowerCase(); 
     } 

     // find next index of searchterm, starting from current cursor position 
     var cursorPos = ($("#txtArea").getCursorPosEnd()); 
     var termPos = txt.indexOf(strSearchTerm, cursorPos); 

     // if found, select it 
     if(termPos != -1){ 
      $("#txtArea").selectRange(termPos, termPos+strSearchTerm.length); 
     }else{ 
      // not found from cursor pos, so start from beginning 
      termPos = txt.indexOf(strSearchTerm); 
      if(termPos != -1){ 
       $("#txtArea").selectRange(termPos, termPos+strSearchTerm.length); 
      }else{ 
       alert("not found"); 
      } 
     } 
    }; 

    SAR.findAndReplace = function(){ 
     // collect variables 
     var origTxt = $("#txtArea").val(); // needed for text replacement 
     var txt = $("#txtArea").val(); // duplicate needed for case insensitive search 
     var strSearchTerm = $("#termSearch").val(); 
     var strReplaceWith = $("#termReplace").val(); 
     var isCaseSensitive = ($("#caseSensitive").attr('checked') == 'checked') ? true : false; 
     var termPos; 

     // make text lowercase if search is supposed to be case insensitive 
     if(isCaseSensitive == false){ 
      txt = txt.toLowerCase(); 
      strSearchTerm = strSearchTerm.toLowerCase(); 
     } 

     // find next index of searchterm, starting from current cursor position 
     var cursorPos = ($("#txtArea").getCursorPosEnd()); 
     var termPos = txt.indexOf(strSearchTerm, cursorPos); 
     var newText = ''; 

     // if found, replace it, then select it 
     if(termPos != -1){ 
      newText = origTxt.substring(0, termPos) + strReplaceWith + origTxt.substring(termPos+strSearchTerm.length, origTxt.length) 
      $("#txtArea").val(newText); 
      $("#txtArea").selectRange(termPos, termPos+strReplaceWith.length); 
     }else{ 
      // not found from cursor pos, so start from beginning 
      termPos = txt.indexOf(strSearchTerm); 
      if(termPos != -1){ 
       newText = origTxt.substring(0, termPos) + strReplaceWith + origTxt.substring(termPos+strSearchTerm.length, origTxt.length) 
       $("#txtArea").val(newText); 
       $("#txtArea").selectRange(termPos, termPos+strReplaceWith.length); 
      }else{ 
       alert("not found"); 
      } 
     } 
    }; 

    SAR.replaceAll = function(){ 
     // collect variables 
     var origTxt = $("#txtArea").val(); // needed for text replacement 
     var txt = $("#txtArea").val(); // duplicate needed for case insensitive search 
     var strSearchTerm = $("#termSearch").val(); 
     var strReplaceWith = $("#termReplace").val(); 
     var isCaseSensitive = ($("#caseSensitive").attr('checked') == 'checked') ? true : false; 

     // make text lowercase if search is supposed to be case insensitive 
     if(isCaseSensitive == false){ 
      txt = txt.toLowerCase(); 
      strSearchTerm = strSearchTerm.toLowerCase(); 
     } 

     // find all occurances of search string 
     var matches = []; 
     var pos = txt.indexOf(strSearchTerm); 
     while(pos > -1) { 
      matches.push(pos); 
      pos = txt.indexOf(strSearchTerm, pos+1); 
     } 

     for (var match in matches){ 
      SAR.findAndReplace(); 
     } 
    }; 


    /* TWO UTILITY FUNCTIONS YOU WILL NEED */ 
    $.fn.selectRange = function(start, end) { 
     return this.each(function() { 
      if(this.setSelectionRange) { 
       this.focus(); 
       this.setSelectionRange(start, end); 
      } else if(this.createTextRange) { 
       var range = this.createTextRange(); 
       range.collapse(true); 
       range.moveEnd('character', end); 
       range.moveStart('character', start); 
       range.select(); 
      } 
     }); 
    }; 

    $.fn.getCursorPosEnd = function() { 
     var pos = 0; 
     var input = this.get(0); 
     // IE Support 
     if (document.selection) { 
      input.focus(); 
      var sel = document.selection.createRange(); 
      pos = sel.text.length; 
     } 
     // Firefox support 
     else if (input.selectionStart || input.selectionStart == '0') 
      pos = input.selectionEnd; 
     return pos; 
    }; 
</script> 

Answer 2

javascript ------------------- --------------

 function dog(id) 
     { 
      return document.getElementById(id); 
     } 
     function find() 
     { 
      var a=dog("txtf").value; 
      var b=dog("ta").value; 
      var c=""; 
      for(var i=0;i<b.length;i++) 
      { 
       var d=b.substr(i,a.length) 
       if (d.indexOf(a) > -1)   
        c=c +" " + (d.indexOf(a)+i); 
      } 
      if (c!="") 
      { 
       alert(c); 
      } 
      else 
      { 
       alert("not find"); 
      } 
     } 
     function replace() 
     { 
      var a=dog("txtf").value; 
      var b=dog("ta").value; 
      var c=""; 
      for(var i=0;i<b.length;i++) 
      { 
       var d=b.substr(i,a.length) 
       if (d.indexOf(a) > -1)  
       { 
        c=c + dog("txtr").value; 
        i=i+a.length-1; 
       } 
       else 
        c=c + b.charAt(i); 
      } 
      dog("ta").value=c; 
     } 

html ---------------------------- --------------------

<input type="text" id="txtf" value="this" style="width:427px"/> 
    <input type="button" value="Find" style="width:70px" onclick="find()" /> </br> 
    <input type="text" id="txtr" value="it" style="width:427px"/> 

    <input type="button" value="Replace" style="width:70px" onclick="replace()"/> </br> 
    <textarea id="ta" style="width:500px;height:500px"> 

这是测试文本区域找到&替换功能 这是找到项目替换为html编程语言

Answer 3

//在滚动中存在一些错误，因此下面的修正可以在Chrome中正常工作。

//Complete code 

var SAR = {};

  SAR.find = function() { 
       debugger; 
       var parola_cercata = $("#text_box_1").val(); // the searched word 
       // make text lowercase if search is supposed to be case insensitive 
       var txt = $('#remarks').val().toLowerCase(); 
       parola_cercata = parola_cercata.toLowerCase(); 

       var posi = jQuery('#remarks').getCursorPosEnd(); // take the position of the word in the text 

       var termPos = txt.indexOf(parola_cercata, posi); 

       if (termPos !== -1) { 
        debugger; 
        var target = document.getElementById("remarks"); 
        var parola_cercata2 = $("#text_box_1").val(); 
        // select the textarea and the word 
        if (target.setSelectionRange) { 

         if ('selectionStart' in target) { 
          target.selectionStart = termPos; 
          target.selectionEnd = termPos; 
          this.selectionStart = this.selectionEnd = target.value.indexOf(parola_cercata2); 
          target.blur(); 
          target.focus(); 
          target.setSelectionRange(termPos, termPos + parola_cercata.length); 
         } 
        } else { 
         var r = target.createTextRange(); 
         r.collapse(true); 
         r.moveEnd('character', termPos + parola_cercata); 
         r.moveStart('character', termPos); 
         r.select(); 
        } 
       } else { 
        // not found from cursor pos, so start from beginning 
        termPos = txt.indexOf(parola_cercata); 
        if (termPos !== -1) { 
         var target = document.getElementById("remarks"); 
         var parola_cercata2 = $("#text_box_1").val(); 
         // select the textarea and the word 
         if (target.setSelectionRange) { 

          if ('selectionStart' in target) { 
           target.selectionStart = termPos; 
           target.selectionEnd = termPos; 
           this.selectionStart = this.selectionEnd = target.value.indexOf(parola_cercata2); 
           target.blur(); 
           target.focus(); 
           target.setSelectionRange(termPos, termPos + parola_cercata.length); 
          } 
         } else { 
          var r = target.createTextRange(); 
          r.collapse(true); 
          r.moveEnd('character', termPos + parola_cercata); 
          r.moveStart('character', termPos); 
          r.select(); 
         } 
        } else { 
         alert("not found"); 
        } 
       } 
      }; 


      $.fn.getCursorPosEnd = function() { 
       var pos = 0; 
       var input = this.get(0); 
       // IE Support 
       if (document.selection) { 
        input.focus(); 
        var sel = document.selection.createRange(); 
        pos = sel.text.length; 
       } 
       // Firefox support 
       else if (input.selectionStart || input.selectionStart === '0') 
        pos = input.selectionEnd; 
       return pos; 
      }; 
     </script>