【发布时间】：2015-04-20 10:43:01
【问题描述】：
我一直在尝试突出显示表单的文本区域（多个文本区域）中的多个搜索结果命中。
在为 S.O. 准备这个问题时，经过大量搜索和多次试验，我找到了解决方案。但在我提交之前。我认为值得在这里记录下来，以便为遇到同样问题的其他人节省时间。我希望这是在 S.O. 上可以接受的事情。如果没有，版主请删除。
在我正在开发的应用程序中，用户输入文本并存储在 MySQL 中，其中每条记录对应一个表单。用户可以调用任何记录进行编辑，当他们这样做时，他们将再次在文本区域中显示先前输入的数据以进行修改。这一切都有效。
现在，我实现了一个搜索功能来搜索整个表格，当用户调用一条记录时，我想以表格形式显示它以进行编辑，突出显示页面上的所有搜索命中 - 例如像这样：
（来源：informationtamers.com）
这很简单，实际表单更长，因此用户可能不会注意到页面上的其他点击。
如果命中字符串出现在表单中，我已经使它与第一次出现的命中字符串一起突出显示，但是当字符串在一个文本区域或多个文本区域中多次出现时问题就出现了表格。
我已经尝试了这些方法：
setSelectionRange：这是唯一一个即使在中途也可以工作的选项，但每个表单只突出显示一个字符串。这是有道理的，因为 AFAIK 您不能在 html 输入字段或表单中选择多个项目，并且作为寻找搜索结果的用户的 UI，它不是非常用户友好。
在输入文本的适当位置添加样式：
<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>来突出显示，和其他的一样，所以我怀疑它将适用于文本区域。
【问题讨论】：
标签： javascript jquery search textarea