首页 > 其他分享 >js中查询一段文本并选中查到的所有匹配能实现吗?

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

时间:2023-09-18 10:08:24浏览次数:41  
标签:keyWord rng 文本框 js 选中 str var 查到


  有一个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… " οnclick="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" οnclick="searchKeyWords('计算机')">

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

标签:keyWord,rng,文本框,js,选中,str,var,查到
From: https://blog.51cto.com/u_8215601/7507385

相关文章

  • 一段动态滚动公告栏的js代码
    代码如下:<spanstyle='visibility:hidden;'><spanid="pm1">公园小路上,男正对女发誓。男:我爱你,直到大海干枯。女:不行,冰川期到时,海平面回下降。男:我爱你,直到地球毁灭。女:不行,一颗慧星撞过来,地球就没了。男:我爱你,直到中国电信实行手机单向收费!女:太美了。接吻声——————......
  • 在一个js文件中包含另一个js文件的方法
    ---------a.htm---------<scriptlanguage='javascript'src="a.js"></script><scriptlanguage="javascript">jin();liu();</script>--------a.js--------document.write("<scriptlanguage=&#......
  • 当页面中文本不允许选择时,使文本框中文本可以选择的js代码
    <bodyonselectstart="returnoSelect(event.srcElement);"><scriptlanguage="javascript">functionoSelect(obj){if(obj.type!='text')returnfalse;}</script><inputtype="text"name=&quo......
  • JS装饰器模式,让你的代码更优雅
    装饰器模式JavaScript装饰器模式是一种常用的设计模式,它可以让你在不改变原有代码的情况下,动态地给对象添加新的功能。本文将通过一个实际的例子来介绍JavaScript装饰器模式的使用方法和优势。装饰器模式的定义装饰器模式是一种结构型设计模式,它允许你在运行时动态地给一个对象......
  • 题解 LOJ2549【[JSOI2018] 战争】
    problem给你两个平面凸多边形\(A,B\),\(Q\)次询问,每次询问是一个向量\(\vecv\),回答\(A\)与\(B+\vecv\)是否有交。\(n,Q\leq10^5\)。solution观察闵可夫斯基和(Minkowskysum)的定义,若将这个运算定义为\((*)::[Point]\to[Point]\to[Point]\),则满足:\[A*B=\{......
  • Linux管理多版本node.js
    这里介绍的是Linux版本的nvm工具:一个nodejs版本管理工具!这里可以灵活切换node指定版本哟~下载地址:https://github.com/nvm-sh/nvm/releases/1.安装需要先安装git、curlyuminstall-ygitcurl这里很慢,需要登录。如果不小心退出来,需要重新执行一下安装脚步:这时候需要......
  • Vue js 框下制作登录页面的新方法
    ......
  • JS防抖和节流
    引言:在前端开发中,性能优化是至关重要的。在处理用户输入、滚动事件、表单提交以及其他频繁触发的操作时,防抖和节流是两个常用的技术,用来减少不必要的资源消耗和提高用户体验。什么是防抖和节流?防抖:它限制了一个函数在连续触发事件后的执行次数。如果在一段时间内多次触发同一......
  • JS计算数组层级(深度)
    如果有一个多层嵌套的数组,想要计算其层级(深度),可以使用递归或迭代方法来实现。以下是两种常用的方法示例:递归方法:functioncalculateDepth(arr){if(!Array.isArray(arr)){return0;//如果不是数组,返回0表示不是层级结构}letmaxDepth=0;for(const......
  • 添加Element ui依赖报错:npm ERR code EPERM,syscall mkdir, npm ERR! path D:\Vue\
    添加Elementui依赖报错:npmERRcodeEPERM,syscallmkdir,npmERR!pathD:\Vue\nodejs\node_cache\_cacache\index-v5\f3\de具体报错信息如下:我这个是在IDEA控制台输入npmielement-ui-S添加elementui依赖时出现的报错解决办法:修改nodejs(安装node的安装地址那里)......