js中查询一段文本并选中查到的所有匹配能实现吗?

来源:互联网 发布:道尔顿和怡口 知乎 编辑:程序博客网 时间:2024/04/30 01:51

  有一个csdn网友遇到了这样的问题,想在一段文本中查询,然后选中匹配了的所有内容。但是单纯从需求来讲,我认为是无法实现的。

我给出的解释是:

在文本框中同时选中不连续的片断是不可能的。

但是如果是非文本框中的文本,可以通过改变字体颜色和背景的方法来模拟不连续片断的同时选中效果。

我得代码是:

 <script language="JScript">
var str = ""
var found = false
function searchKeyWords()
{
  var keyWord=document.getElementById("txtKeyWord").value;
  if(keyWord=='') return;
  var content=document.getElementById("txtContent").innerText;
  var strPat=eval("/" + keyWord + "/g");
  var str=content.replace(strPat,"<span style='color:#ff0000;font-weight:bold;'>" + keyWord + "</span>");
  if(str!='')document.getElementById("txtContent").innerHTML=str;
}
</script>
<div id="txtContent" style='border-width:1'>
19xx年,第一台计算机问世, 这是计算机时代的开始
</div>
<br/><br/>
<Input type="text" id="txtKeyWord" size="10" value="计算机">
<input type="button" value=" search… " onclick="searchKeyWords()">

另外 昵称为 无法界定 的网友给了另一种答案,他的程序模拟普通的文本搜索程序,一次搜索只找到一个匹配并选中当前的一个搜索项,文本放到文本框中。代码如下:

 <script language="JScript">
var str = ""
var found = false
function searchKeyWords(keyWord)
{
  if (str=="" ||(found && str.indexOf(keyWord)<0) )
    str = txt.value

  if(str.indexOf(keyWord) >=0 )
  {
    var index0 = str.indexOf(keyWord)
    var index1 = keyWord.length
    var rng = txt.createTextRange();
    rng.collapse(true)
    rng.moveStart("character", index0)
    rng.moveEnd("character", index1)
    rng.select()
    str = str.replace(keyWord, String(Math.pow(10,index1)-1))
    found = true
  }
}
</script>
<input type="text" style="width:360" name="txt" value="19xx年,第一台计算机问世,这是计算机时代的开始"><input type="button" value="click" onclick="searchKeyWords('计算机')">

  我的结论就是:在文本框中选中不连续的片断是不可能的。只能放弃或者用其他方法模拟。

原创粉丝点击