Javascript 如何在输入多个文本区域中突出显示多个搜索结果_Javascript_Jquery_Search_Textarea

Javascript 如何在输入多个文本区域中突出显示多个搜索结果

javascript jquery search

Javascript 如何在输入多个文本区域中突出显示多个搜索结果,javascript,jquery,search,textarea,Javascript,Jquery,Search,Textarea,我一直在试图突出显示表单的文本区域（多个文本区域）中的多个搜索结果点击在为S.O.准备这个问题时，经过多次搜索和试验，我找到了一个解决方案，但在我提交之前。我认为值得在这里录音，为其他有同样问题的人节省时间。我希望这是一个可以接受的事情做的S.O.如果没有，版主，请删除在我正在开发的应用程序中，用户输入文本并将其存储在MySQL中，每个记录对应一个表单。用户可以调用任何记录进行编辑，当他们调用时，他们将在文本区域中再次显示以前输入的数据以进行修改。这一切都有效现在，我已经实现了一个搜索功能

我一直在试图突出显示表单的文本区域（多个文本区域）中的多个搜索结果点击

在为S.O.准备这个问题时，经过多次搜索和试验，我找到了一个解决方案，但在我提交之前。我认为值得在这里录音，为其他有同样问题的人节省时间。我希望这是一个可以接受的事情做的S.O.如果没有，版主，请删除

在我正在开发的应用程序中，用户输入文本并将其存储在MySQL中，每个记录对应一个表单。用户可以调用任何记录进行编辑，当他们调用时，他们将在文本区域中再次显示以前输入的数据以进行修改。这一切都有效

现在，我已经实现了一个搜索功能来搜索整个表，当用户调用一条记录时，我希望以编辑的形式显示它，并突出显示页面上的任何和所有搜索点击-例如：

（来源：）
这很简单，实际的表单更长，因此用户可能不会注意到页面上的其他点击

如果命中字符串出现在表单中，我已经让它在第一次出现时加亮显示，但是当字符串在一个文本区域或同一表单的多个文本区域中多次出现时，问题就出现了

我尝试过以下方法：

setSelectionRange：这是唯一一个即使是一半也有效的方法，但每个表单只突出显示一个字符串。这是有意义的，因为在html输入字段或表单中，不能选择多个项目，而且作为用户界面，用户可以查找搜索结果，这对用户不是很友好
在输入文本的适当位置添加样式：
```
ZZZZ
```
我没想到这会起作用，因为它是在textarea中输入的，但我确实尝试过，它只是显示了html。（对于记录，用户的数据在提交后立即转义。）
调用浏览器自己的搜索工具并将搜索词传递给它。我在三个方面找不到这样做的方法：我找不到通过编程触发Ctrl+f、将搜索词插入浏览器的搜索框并通过编程启动浏览器搜索的方法
Johann Burkard的“亮点”jQuery插件。这可以突出显示页面上的多个条目，但不能在textarea字段中突出显示，据我所知，它会忽略这些条目。我相信我已经正确设置并调用了它，因为我可以让它在页面上突出显示多个文本区域标题。它通过添加
```
搜索结果
```
来工作
frightanic提供的结果与Burkard的插件相同
Renato的这篇文章是针对搜索引擎结果的，所以不是我的用例
这会过滤掉不包含匹配字符串的段落，因此我没有尝试，但演示显示，它使用
```
搜索结果
```
来突出显示，与其他段落一样，因此我怀疑它是否适用于文本区域

在玩了一番之后，它实现了我的愿望：

文本区域的大小不能调整。文档中说明了这一点，但也记录了一个选项“resizeable”，并指出jQueryUI resizeable是必需的。我试过了，但没用。我想这是一个意图，但没有调试，因为作者说他不再工作的插件
我在使用colorbox时发现，当用户离开表单时，或者在查看未点击的记录时，必须
```
.highlightTextarea（“销毁”）
```
然后
```
.highlightTextarea（“禁用”）
```

在某些情况下，CSS与我的发生冲突并将表单弄乱，因此当用户取消搜索时，我

。从DOM中删除表单并重建它。这可能是因为我使用插件的方式，而不是最好的解决方案，但我找不到其他解决方法。
现在的结果似乎是可靠的，并且提供了我一直试图寻找的效果