如何在输入多个textareas中突出显示多个搜索结果

Question

我一直在尝试突出显示textareas中的多个搜索结果命中 - 多个textareas - 表单。

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

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

现在，我已经实现了一个搜索功能来搜索整个表格，当用户召回一个记录时，我想将其呈现在表格中进行编辑，页面上的任何和所有搜索点击都会突出显示 - 例如像这样：

这是简化的，实际的表单更长，因此用户可能不会注意到页面上的其他点击。

如果字符串中存在匹配字符串的第一次出现，我已经使它突出显示，但是当字符串在一个文本区域中出现多次或在同一文本区域中出现多个文本区域时出现问题形式。

我尝试过这些方法：

• setSelectionRange：这是唯一一个甚至中途工作的人，但每个表单只突出显示一个字符串。这是有道理的，因为AFAIK不能在html输入字段或表单中选择多个项目，也不能在寻找搜索结果的用户界面中使用它不是非常用户友好。

• 在输入文字的适当位置添加样式：<span style="background-color: yellow">ZZZZ</span>
  我没想到这会起作用，因为它是在textarea中的输入，但我确实尝试过，它只显示了html。 （对于记录，用户的数据会在提交后立即转义。）

• 调用浏览器自己的搜索工具并将其传递给搜索词。我没有找到任何方法在三个方面这样做：我找不到以编程方式触发Ctrl + f的方法，将搜索词注入浏览器的搜索框并以编程方式启动浏览器搜索。

• Johann Burkard的'突出'jQuery插件。 http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html 这能够突出显示页面上的多个条目，但不能在textarea字段中突出显示，据我所知，它忽略了。我相信我已经设置并正确调用它，因为我可以让它突出显示页面上的多个文本区域标题。它的工作原理是添加<span class="highlight">Search result</span>。

• 来自frightanic的http://frightanic.com/projects/jquery-highlight/给出了与Burkard插件相同的结果。

• Renato的这个http://www.jquery.info/The-plugin-SearchHighlight针对搜索引擎结果，因此不是我的用例。

• 此http://jaspreetchahal.org/examples/jquery-onpage-text-highlighter-and-filter.html过滤掉了不包含匹配字符串的段落，因此我没有尝试过，但演示显示它使用<span style="background:yellow;color:#000000">Search result</span>突出显示，就像其他人一样所以我怀疑它会对文本区域起作用。

Answer 1

• 经过一些游戏后，我做了我想做的事：http://bebo.minka.name/k2work/libs.js/jquery/2.1.0/highlightTextarea/

有些要点需要注意。

1. 文本区域不得调整大小。文档说明了这一点，但也记录了一个可调整大小的选项＆＃39;并说jQueryUI Resizable是必需的。我尝试过这个并没有用。我想这是一个意图，但没有调试，因为作者说他不再使用该插件。

2. 我在彩盒中使用此功能，发现当用户离开表单时我必须.highlightTextarea("destroy")然后.highlightTextarea("disable")，或者在查看没有点击的记录时出现高亮显示

3. 在某些情况下，CSS与我冲突并搞砸了表单，所以当用户取消搜索时，我.remove来自DOM的表单并重建它。这可能是由于我使用插件的方式，而不是最佳解决方案，但我无法找到解决问题的方法。 结果现在看起来很稳固，并提供了我试图找到的效果。