查找和替换文本区域

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>

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> 

Answer 4

这个答案是那些寻找更完整和完善版本的Jens Fischer's solution 的人，该版本具有附加功能，例如查找上一个、查找下一个、使用正则表达式查找和替换、撤消和重做。

这里是 GitHub 项目的链接：https://github.com/AlienKevin/SmartTextarea