实现动态输入关键字时关键字高亮

项目中要求实现一个功能，在输入框中输入特定的搜索语句，当输入为关键字时，关键字高亮，且输入满一行进行换行操作

首先分析如果想实现一部分关键字高亮，输入框本身肯定是做不到的，因为实现高亮需要通过动态的给关键字添加span标签，再给span标签中的内容设置颜色

如果使用div,那必须给div添加contenteditable = "true"属性，使其div可输入，其次监听按键是否抬起，对div中的内容进行检测并替换关键字，我在尝试这种方法时遇到了几个问题，第一个问题是每次输入内容进行替换后光标自动定位在开头，此问题在网上查找资料解决如下

function po_Last_Div(obj) {

if (window.getSelection) {//ie11 10 9 ff safari

obj.focus(); //解决ff不获取焦点无法定位问题

var range = window.getSelection();//创建range

range.selectAllChildren(obj);//range 选择obj下所有子内容

range.collapseToEnd();//光标移至最后

}

else if (document.selection) {//ie10 9 8 7 6 5

var range = document.selection.createRange();//创建选择对象

//var range = document.body.createTextRange();

range.moveToElementText(obj);//range定位到obj

range.collapse(false);//光标移至最后

range.select();

}

第二个问题为如果用户将关键字改变，但程序进行监听时获取的还是加了span标签的内容，所以当关键字被修改成不是关键字时，其高亮并没有消失，此问题的解决办法就是每次监听到有键按下，获取div的文本值（div.text（）），然后使用replace()方法将获取到的文本值中的空格替换成&nbsp(这块的替换因为在查找关键字时要利用正则表达式，正则表达式中有&nbsp),再根据需求中对关键字的定义进行各种匹配与替换。在显示的时候用html()方法让浏览器对一些标签进行转化

第三个问题是当输入中文时在虚拟按键中，应用程序同样监听按键，所以中文输入时会出现来回跳转，并把中文输入未结束的拼音同样显示在页面上，此问题的原因主要是因为我通过监听按键来判断内容修改，至此未找到能很好解决此问题的方法，毕竟还是前端小白一枚。

这条路走死后，我又回到原项目中，研究其实现原理，和该原理出现的bug

原项目中实现的原理，大逻辑是使用angularjs将一个输入框和div绑定，输入框使用ng-bind将值传递给应用程序控制器，之后对输入框的值进行处理（关键字实现高亮），然后将div添加ng-bind-html属性（用于显示关键字高亮的内容），最后将改变后的内容显示在界面

在这过程中，让输入框中的内容透明，在输入框中的上层有div，用户看到的是div显示出来的带有高亮的内容，但是实际操作的是下面被设置为透明颜色的输入框

在此方法的实现过程中，会出现三个bug

第一、当输入中文时，虚拟输入内容不显示，看不到输入的拼英，只有字，分析出现此问题的原因是因为输入框和div进行绑定是值的绑定，所以当输入中文时，只有我们的值才会被传递，拼英不会显示

第二、因为输入框的字体间隔和div中显示的字体间隔不一样，当输入过多内容的时候，输入框的光标会和div输入的值重叠（虽然输入框的内容设置为透明，但光标还可以看见，所以div是没有光标的，是用input光标，div的内容）

第三、当用户在输入一段值后又想在中间插入值时，这时又出现了问题，input输入框的光标会动来动去，这时input框中光标位置的字符和div给用户肉眼看到的光标前的字符是不一样的，这样就会出现偏差，删除的和用户认为删除的不是同一个

那么本着先修改掉此类问题的想法，开始了又一次探索

首先因为需求又增加了换行要求，所以我将输入框（input）换成了textarea,其次我没有使用angular进行两个数据的绑定和监听，我使用了绑定input事件对输入框进行监听，每次获得输入框中的值，这样当输入中文时同样会获得值显示在div上，其他设置都是为了让textarea和div尽量保持一致。

对于关键字的高亮，实现原理就是通过正则表达式把所有的匹配原则先通过正则表示出来，之后利用replace()方法进行替换

replace()方法传递的两个参数，第一个参数是正则，第二个参数同样可以是个函数，函数内的参数同样可以帮助我们去进行一些比较复杂的替换机制

实现动态输入关键字时关键字高亮相关推荐

前端Vue开发，多关键字搜索时，搜索结果高亮显示(解决输入英文时，会错误的把html标签渲染的问题)
问题背景: 网上搜索关于搜索结果高亮显示,基本上都是单一关键字搜索,或者多关键字搜索,但是没有解决输入英文字符时,把html标签渲染出来的问题,比如在进行多关键字搜索时,可能会进行a;s的搜索, 就 ...
仿淘宝搜索栏，实现用户输入搜索关键字时可以显示搜索提示的效果 Ajax
要实现的 UI 功能依赖文件: jQuery https://jquery.com/ art-template 模板引擎 https://aui.github.io/art-template/ 实现 ...
python可变长参数（非关键字及关键字参数）
可变长参数存在的意义是:每次调用一个函数处理不同量的参数输入.即,参数在调用之前输入的参数数量是未知的,或者多次调用该函数,每次的参数输入的量是不一致的: 可变长参数分为非关键字和关键字类型,分别对应 ...
【java】动态高并发时为什么推荐重入锁而不是Synchronized？
1.概述转载:http://www.dreamwu.com/post-1758.html 这个图画的不错,有助于加深理解. [Java]Synchronized 有几种用法 [java] 从hots ...
关键字和关键字优化（转）
关键字是我们用来体现一个网站或者一个页面所提供的重点信息,一个网站页面有2面,一面是给浏览者读取信息,也就是我们常看到的网站信息,另一面就是给搜索引擎ROBOT,SPIDER读取信息的. 对于留恋者读 ...
【h5】ios自带输入法输入中文时多次触发input事件的处理
实现移动端的即时搜索的时候监听input事件掉接口查询,但是在ios设备上遇到了问题,使用ios自带输入法输入汉字时,会出现输入一个字母就触发一次事件,导致频繁调用接口的问题. 如果是输入纯英文没什么 ...
即时搜索：对于ios自带输入法输入中文时多次触发input事件的处理
实现移动端的即时搜索的最佳方案,一定是使用input propertychange事件了,但是在ios设备上遇到了问题,使用ios自带输入法输入汉字时,会出现多次触发input事件的情况,一开始可能由 ...
tensorrt动态输入分辨率尺寸
本文只有 tensorrt python部分涉动态分辨率设置,没有c++的. 目录 pytorch转onnx: onnx转tensorrt: python tensorrt推理: 知乎博客也可以参考: ...
取input 输入_tensorRT动态输入（python）
关于tensorRT动态输入的例子大多数都是c++版本的,python版本的较少,这里简单总结下python处理tensorRT动态输入时,遇到的一些问题及解决方案. 这里的动态输入是指batch,w ...

实现动态输入关键字时关键字高亮

实现动态输入关键字时关键字高亮相关推荐

最新文章

热门文章