Выделить определенные строки в данной длинной строке в Javascript

Question

У меня есть длинная строка и список других строк, которые мне нужно отметить в длинной строке.Скажем, у нас есть abcdefghijk и строки, которые мне нужно пометить: ghi и abc.

Какой самый простой способ сделать это в Javascript и CSS?Я думал об использовании метода exec(), который будет возвращать начальный индекс строки в длинной строке.

Тогда у меня будет начальный индекс и размер строки.Итак, я мог найти это в длинной строке.Как я мог выделить это?Может быть, с помощью CSS?

Answer 1

Вы можете попробовать этот jQuery плагин. Это действительно просто ...

Как это использовать?

1 - Скачать плагин

jquery.highlight-3.js (2 КБ) и укажите его на своей странице сразу после jQuery .

2 - стиль выделения класса

Создайте запись в своем листе CSS:

.highlight { background-color: yellow }

3 - Выделить термин / фразу

Вызовите функцию выделения с текстом для выделения. Чтобы выделить все вхождения «ghi» (без учета регистра), которые находятся внутри элемента формы, используйте следующий код:

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

4 - Убрать подсветку

Выделение можно удалить с любого элемента с помощью функции removeHighlight. В этом примере удаляются все выделения под элементом с идентификатором 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; 
}