javascript - 查找和替换文本区域

Question

有没有人知道如何制作一个查找和替换的东西，当你只需点击下一步它就会带你到下一个找到的元素？

编辑:

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

搜索()

或替换()。

目前我正在尝试这个:

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 中对此进行了测试。

查找:将选择搜索项的下一个实例。

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

全部替换:将替换所有出现的地方并选择最后被替换的文本

希望这就是您正在寻找的。你绝对应该能够从这里开始设计它，或者从中创建一个合适的类......

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