查找和替换文本区域
Find and Replace for an Textarea
有没有人知道如何做一个查找和替换的东西，当你可以点击下一步它会把你带到下一个找到的项目?
编辑:用于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;
}
但是这根本不起作用
我更新了我之前的答案，并根据我之前的帖子概述的方向完成了搜索和替换功能。我在Chrome 14、IE8和Firefox 3.6上进行了测试。
Find:将选择搜索词的下一个实例。
查找/替换:将替换下一个出现的搜索字符串并选择替换
Replace All:将替换所有出现并选择最后被替换的文本
希望这就是你要找的东西。你应该能够从这里开始，给它设置样式，或者用它创建一个合适的类…
<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>
这个答案是那些寻找更完整和抛光的版本的Jens Fischer的解决方案与添加的功能，如查找上一个，查找下一个，查找和替换使用正则表达式，撤销和重做。
这里是GitHub项目的链接:https://github.com/AlienKevin/SmartTextarea
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">
这是一个用于测试查找&替换功能这是一个find &替换为HTML编程语言
//在滚动中有一些错误，所以下面是在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>
相关文章：
- onkeyup无法动态创建多个文本区域
- 具有所有样式的文本正在复制到可编辑文本区域
- 在文本区域POST后解码JSON
- HTML文本区域文本到XML
- 阻止在文本区域/文本框中输入数字
- 使用 javascript 单击图片后更改<文本区域>文本
- 使用 javascript 检测文本区域/文本输入中的 HTML 标记，但它应该支持常见的>和<
- 在按 Tab 键时选择文本区域文本
- 切换文本区域文本，但保留对文本的更改
- 清除文本区域/文本框内容的按钮
- 加载页面时，聚焦并全选文本区域文本
- 如何使可编辑文本区域文本不可选择
- 我的文本区域文本是't用javascript将我想要的样式设置为CSS
- 使用jQuery将文本区域文本安全地存储在隐藏字段中，然后稍后在PHP中使用该文本
- 删除文本区域文本提交在新的选项卡
- 如何在添加新文本时保持文本区域文本静态
- 使用 jQuery 将文本区域文本设置为格式正确的 HTML 代码
- 为什么文本添加到区域文本是通过页面刷新，而不是直接刷新
- 使用 jquery 修改文本区域文本
- 如何使用Javascript在文本区域(文本框)中单击(光标闪烁)而不使用鼠标单击
