查找和替换Textarea [英] Find and Replace for an Textarea

问题描述

有人会有任何想法如何做一个查找和替换的东西，当你可以只是点击下一步它会带你到下一个找到的项目？

修改：

对于Textarea。我想要一个Javascript代码，可以添加一个查找和替换到Textarea。

或替换（）。

在时刻尝试这个：

  function allIndexes（）{
 var indices = new Array（）; 
 var index = 0; 
 var i = 0; 
 while（index = $（'＃text'）。val（）。indexOf（$（'＃search'）。val（），index）> 0）{
 indices [i] =指数; 
 i ++; 
} 
 return index; 
} 
  

但这根本不起作用。

解决方案

我更新了我的早期答案，并完成了搜索和替换功能基于我早先的帖子概述的方向。我在Chrome 14，IE8和Firefox 3.6中测试了这个。

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

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

全部替换发生并选择最后被替换的文本

希望这是现在，你在找什么。你应该肯定能够从这里走出来，并设计一个适当的类。

 < script src =jquery.jstype =text / javascript>< / script> 
 
< textarea id =txtAreastyle =width：300px; height：100px> 
这是一个测试。一个测试，我说。单词TEST提到三次。 
< / textarea> 
 
< p> 
< label for =termSearch>搜索< / label> 
< input type =textid =termSearchname =termSearchvalue =test/>< br /> 
< label for =termReplace>替换< / label> 
< input type =textid =termReplacename =termReplacevalue =solution/>< br /> 
< label for =caseSensitive>区分大小写< / label> 
< input type =checkboxname =caseSensitiveid =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（）{
 //收集变量
 var txt = $（＃txtArea）。 
 var strSearchTerm = $（＃termSearch）。val（）; 
 var isCaseSensitive =（$（＃caseSensitive）。attr（'checked'）=='checked'）？真假; 
 
 //如果搜索应该是不区分大小写的，则使文本变小写if（isCaseSensitive == false）{
 txt = txt.toLowerCase（）; 
 strSearchTerm = strSearchTerm.toLowerCase（）; 
} 
 
 //从当前光标位置开始查找searchterm的下一个索引
 var cursorPos =（$（＃txtArea）。getCursorPosEnd（））; 
 var termPos = txt.indexOf（strSearchTerm，cursorPos）; 
 
 //如果找到，选择它
 if（termPos！= -1）{
 $（＃txtArea）。selectRange（termPos，termPos + strSearchTerm.length） ; 
} else {
 //从游标pos中找不到，所以从头开始
 termPos = txt.indexOf（strSearchTerm）; 
 if（termPos！= -1）{
 $（＃txtArea）。selectRange（termPos，termPos + strSearchTerm.length）; 
} else {
 alert（not found）; 
} 
} 
}; 
 
 SAR.findAndReplace = function（）{
 //收集变量
 var origTxt = $（＃txtArea）。 //文本替换需要
 var txt = $（＃txtArea）。val（）; //为不区分大小写的搜索需要重复项
 var strSearchTerm = $（＃termSearch）。val（）; 
 var strReplaceWith = $（＃termReplace）。val（）; 
 var isCaseSensitive =（$（＃caseSensitive）。attr（'checked'）=='checked'）？真假; 
 var termPos; 
 
 //如果搜索应该是不区分大小写的，则使文本变小写if（isCaseSensitive == false）{
 txt = txt.toLowerCase（）; 
 strSearchTerm = strSearchTerm.toLowerCase（）; 
} 
 
 //从当前光标位置开始查找searchterm的下一个索引
 var cursorPos =（$（＃txtArea）。getCursorPosEnd（））; 
 var termPos = txt.indexOf（strSearchTerm，cursorPos）; 
 var newText =''; 
 
 //如果找到，替换它，然后选择它
 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 {
 //从游标pos中找不到，所以从头开始
 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（）{
 //收集变量
 var origTxt = $（＃txtArea）。 //文本替换需要
 var txt = $（＃txtArea）。val（）; //为不区分大小写的搜索需要重复项
 var strSearchTerm = $（＃termSearch）。val（）; 
 var strReplaceWith = $（＃termReplace）。val（）; 
 var isCaseSensitive =（$（＃caseSensitive）。attr（'checked'）=='checked'）？真假; 
 
 //如果搜索应该是不区分大小写的，则使文本变小写if（isCaseSensitive == false）{
 txt = txt.toLowerCase（）; 
 strSearchTerm = strSearchTerm.toLowerCase（）; 
} 
 
 //查找所有出现的搜索字符串
 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（）; 
} 
}; 
 
 
 / *您需要的两个实用程序函数* / 
 $ .fn.selectRange = function（start，end）{
 return this.each ）{
 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支持
 if（document.selection）{
 input.focus（）; 
 var sel = document.selection.createRange（）; 
 pos = sel.text.length; 
} 
 // Firefox支持
 else if（input.selectionStart || input.selectionStart =='0'）
 pos = input.selectionEnd; 
 return pos; 
}; 
< / script> 
  

Would anyone have any idea how to make a Find and Replace thing where when you can just click next it will bring you to the next found item?

Edit:

For an Textarea. I want a Javascript code that can add a Find and Replace to Textarea. I don't wanna just use.

search()

or Replace().

At the Moment im trying this:

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

But that doesn't work at all.

解决方案

I updated my earlier answer and finished the search and replace functionality based on the direction my earlier post outlined. I tested this in Chrome 14, IE8 and Firefox 3.6.

Find: will select the next instance of the searchterm.

Find/Replace: will replace the next occurrence of the search string and select the replacement

Replace All: will replace all occurences and select the piece of text that has been replaced last

Hope this is now, what you were looking for. You should definitely be able to go from here and style this or make a proper class out of this...

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

这篇关于查找和替换Textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！