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

Question

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

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

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

Answer 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();

Answer 2

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

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

然后你在CSS中调整范围：

.highlight
{
    background-color:yellow; 
}