===========在JS中查找文本框中的文字并选中=========

huangwenquan123 2012-05-22 09:11:57
需求:有个TextBox,TextMode="MultiLine"
然后有个搜索框text
在搜索框中输入,查找TextBox中的字符并选种.
注意有换行
这个换行问题一直搞不定.
求帮助!!!

支持IE,ff,opera
...全文
219 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
huangwenquan123 2012-05-22
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 的回复:]
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
ht……
[/Quote]帅,原来是ie多了个\r.害我纠结了一早上.
我也刚好写好了,原本ie是用findText来处理,ff用selectionStart来处理.


        var txtBox = document.getElementById("text_Area");

        var index=0;

        if(document.selection)

             rng = txtBox.createTextRange();

        function findText(str){

             if(str=="")

                return;

             str=str.toLowerCase();

             if(document.selection){

                var num = document.selection.createRange().text.length;

                 rng.moveStart("character",num);

                rng.moveEnd("character",txtBox.value.length);

                　　 if(rng.findText(str))

                   rng.select();

                 if(rng.text.toLowerCase()!=str){　　 

                    alert("已到达文件结尾");

                    rng = txtBox.createTextRange();

                }

            }

            else{

                index = txtBox.value.toLowerCase().indexOf(str,index);

                if(index==-1){

                    alert("已到达文件结尾");

                    return;

                }

                txtBox.selectionStart=index;

                var end = index+str.length;

                txtBox.selectionEnd=end;

                txtBox.focus();

                index++;

            }

        }


最后还是用你那个方法.


<body>

    <textarea id="txtText" cols="120" rows="20"></textarea>

    <input id="txtSearch" type="text" />

    <input id="Button1" type="button" value="搜索" onclick="Search()" />

</body>

<script type="text/javascript">

var txtSearch = document.getElementById("txtSearch");

var txtText = document.getElementById("txtText");

var Start=0,End=0;

function Search(){

    if(txtSearch.value.length==0){

        alert("请输入要搜索的字符！");

        return;

    }

    Start = txtText.value.toLowerCase().replace(/\r\n/ig,'\n').indexOf(txtSearch.value.toLowerCase(),Start);

    End = Start+txtSearch.value.length;

    if(Start==-1){

        alert("已到达文件结尾！");

        return;

    }

    if(document.selection){

         var range=txtText.createTextRange();

         range.collapse(true);

         range.moveEnd("character",End);

         range.moveStart("character",Start);

         range.select();

    }

    else{

    　　 txtText.setSelectionRange(Start, End);

    　　 txtText.focus();

    }

    Start++;

}

</script>
hch126163 2012-05-22
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

html,body{width:100%;height:100%}

</style>

</head>

<body>

<textarea id='txtText' cols=50 rows=6>

我

想

页

面

加

载

的

时

候

</textarea>



</body>

<script>



var txt = "时";

var txtText = document.getElementById('txtText');

var start = txtText.value.replace(/\r\n/ig,'$').indexOf(txt); // IE 换行符 \r\n 需要处理一下

var end = start + txt.length;

setSelectRange(txtText,start,end);



　 /**

* 设置textarea的选中区域

*/

 function setSelectRange( textarea, start, end )

{

	if ( typeof textarea.createTextRange != 'undefined' )// IE

	{

		var range = textarea.createTextRange();

		// 先把相对起点移动到0处

		range.moveStart( "character", 0)

		range.moveEnd( "character", 0);

		range.collapse( true); // 移动插入光标到start处

		range.moveEnd( "character", end);

		range.moveStart( "character", start);

		range.select();

		} // if

	  else if ( typeof textarea.setSelectionRange != 'undefined' )

	　{

	　　 textarea.setSelectionRange(start, end);

	　　 textarea.focus();

	　} // else

} 

</script>

</html>
hch126163 2012-05-22
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

html,body{width:100%;height:100%}

</style>

</head>

<body>

<div style="width:400px;height:2000px;background-color:#F00;float:right">

<div></div>

</div>

<div style="width:400px; height:200px; background-color:#F00"></div>

<div style="width:400px; height:200px; background-color:#F00;float:right"></div>

<input type="button"></input>

<input type="text"></input>

<textarea id='txtText' cols=50 rows=6>

我

想

页

面

加

载

的

时

候

</textarea>



</body>

<script>



var txt = "时";

var txtText = document.getElementById('txtText');

var start = txtText.value.replace(/\r\n/ig,'$').indexOf(txt); // IE 换行符 \r\n 需要处理一下

var end = start + txt.length;

setSelectRange(txtText,start,end);



　 /**

* 设置textarea的选中区域

*/

 function setSelectRange( textarea, start, end )

{

	if ( typeof textarea.createTextRange != 'undefined' )// IE

	{

		var range = textarea.createTextRange();

		// 先把相对起点移动到0处

		range.moveStart( "character", 0)

		range.moveEnd( "character", 0);

		range.collapse( true); // 移动插入光标到start处

		range.moveEnd( "character", end);

		range.moveStart( "character", start);

		range.select();

		} // if

	  else if ( typeof textarea.setSelectionRange != 'undefined' )

	　{

	　　 textarea.setSelectionRange(start, end);

	　　 textarea.focus();

	　} // else

} 





window.onload=function(e){



bindEvent(document.body,'click',function(e){

	e=e||event;

	var obj = e.srcElement || e.target;

	if(typeof(obj.innerHTML)=='string'){

		var div=document.createElement("div");

		var x=e.x||e.pageX;

		var y=e.y||e.pageY;

		div.style.cssText="position:absolute;left:"+x+"px;top:"+y+"px;";

		div.innerHTML="Good";

		document.body.appendChild(div);

	}

});

};



function bindEvent(obj,evt,fun) 

{

     if(window.addEventListener){

           obj.addEventListener(evt, function(e){ fun(e);},false); 

     }else{

           obj.attachEvent('on'+evt,fun);     

    }

}

var xxx = {a:{a1:"a1"},b:{b1:{b11:1,b12:2}}};

var yyy = {b:{b1:{b11:4,b12:5}}};





for(var y in yyy)

{

xxx[y] = yyy[y];

}

function getMatchs(str,tag){

var reg =eval('/\\['+tag+'\\](.+?)\\[\\/'+tag+'\\]/i');

return str.match(reg);

}

var m = getMatchs('aaaa[cn]中文[/cn]bbbb[en]英文[/en]ccccc','cn');

//alert(m.length +"\r\n" +m[0]+"\r\n"+m[1]);



</script>

</html>
huangwenquan123 2012-05-22
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]
楼主说的选中是什么意思?

就是鼠标选中文字 蓝底白字的效果？
[/Quote]恩 是的！
只是这里不是鼠标选中，是js设置选中！
其中会有换行。
001007009 2012-05-22
  • 打赏
  • 举报
 回复
楼主说的选中是什么意思?

就是鼠标选中文字 蓝底白字的效果？
【生成vue代码】可视化布局一键生成vue文件，iview框架灵活使用
在上一节课程中讲到了可视化布局，如何去自动生成一个静态页面，...如何在编译好的页面下还能进行可视化操作，在不看代码的情况下快速定位功能位置并直接去修改 如何去一键生成vue文件，让开发变的如此简单，快速，高效
js从text或textarea文本框中选择部分文本，并取得选择的内容
亲测通过，兼容所有浏览器！ 腾讯微博：http://t.qq.com/guyue1106/profile?pgv_ref=im.minicard.title&ptlang=2052， 新浪weibo：http://weibo.com/1714234642/profile?leftnav=1&wvr=3.6&mod=personinfo 欢迎互加!   html： 首先是js
javascript 获取光标所选中的内容并插入到另一个文本框中(兼容ie和ff）
项目中正好用到 做下笔记方便以后查找 ie获取光标的位置使用document.selection.createRange() 火狐下使用document.getElementById(id).selectionStart 和document.getElementById(id).selectionEnd 假设我们要获得id为txt的Textarea元素里面光标所选择的内容 首先创建一个获...
createTextRange()的使用(含文本框选中部分文字内容)
function test() { var rng=document.body.createTextRange(); alert(rng.text) } function test1() { var rng=document.body.createTextRange(); alert(rng.htmlText) } 获取指定文本框中的选中的文字：只响应第一个
js实现textarea选中文字并加粗
转载自:http://www.zjmainstay.cn/js-textarea-select-modify <em>js</em>实现textarea<em>选<em>中</em></em><em>文字</em>并加粗
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章