实现动态输入关键字时关键字高亮
项目中要求实现一个功能，在输入框中输入特定的搜索语句，当输入为关键字时，关键字高亮，且输入满一行进行换行操作
首先分析如果想实现一部分关键字高亮，输入框本身肯定是做不到的，因为实现高亮需要通过动态的给关键字添加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()方法将获取到的文本值中的空格替换成 (这块的替换因为在查找关键字时要利用正则表达式，正则表达式中有 ),再根据需求中对关键字的定义进行各种匹配与替换。在显示的时候用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()方法传递的两个参数，第一个参数是正则，第二个参数同样可以是个函数，函数内的参数同样可以帮助我们去进行一些比较复杂的替换机制