在Javascript中突出显示给定长字符串中的特定字符串答案

【问题标题】：Highlight specific strings in a given long string in Javascript在Javascript中突出显示给定长字符串中的特定字符串
【发布时间】：2011-09-04 21:51:20
【问题描述】：

我有一个长字符串和一个其他字符串的列表，我需要在长字符串中进行标记。假设我们有abcdefghijk，我需要标记的字符串是ghi 和abc。

在 Javascript 和 CSS 中最简单的方法是什么？我考虑过使用exec() 方法，该方法将返回长字符串中字符串的起始索引。

然后，我会得到起始索引和字符串的大小。所以，我可以在长字符串中找到它。我怎么能突出它？也许使用 CSS？

【问题讨论】：

【解决方案1】：

你可以试试这个jQuery 插件。这真的很简单......

怎么用？

1 - 下载插件

jquery.highlight-3.js (2 KB) 并在您的页面中紧跟jQuery 之后引用它。

2 - 设置高亮类的样式

在您的 CSS 表中创建一个条目：

.highlight { background-color: yellow }

3 - 突出显示术语/短语

使用要突出显示的文本调用突出显示函数。要突出显示表单元素中出现的所有“ghi”（不区分大小写），请使用以下代码：

$('form').highlight('ghi');

4 - 删除突出显示

可以使用 removeHighlight 函数从任何元素中删除突出显示。在此示例中，ID 为 highlight-plugin 的元素下的所有高亮都被删除。

$('#highlight-plugin').removeHighlight();

【讨论】：

【解决方案2】：

如果你知道字符串开头的索引和长度，你可以简单地在它周围加上 span 标签。所以你的 HTML 看起来像：

<span class="highlight">abc</span>def<span class="highlight">ghi</span>jk

然后你会在你的 CSS 中设置 span 的样式：

.highlight
{
    background-color:yellow; 
}

【讨论】：