Как выделить текст в html?

Question

[Horus123]

Как выделить текст между html тегов? У меня есть готовая статья в виде html, необходимо при поиске выделять соответствующие слова.

Если текст не обрамлён html тегами, то всё замечательно. Но как реализовать выделение в таком тексте, например:

<p><b>Хабр</b> помоги найти ответ на вопрос</p>

Вот что есть сейчас:
Vue.js

search= ""

 let words = el.text.split(' ')
        for (let key in words) {
          if (words[key].includes(this.search)) {
            words[key] = "<mark>" + words[key] + "</mark>";
          }
        }
        el.text = n.join(" ");

Не могу правильно написать метод split.

Answer 1

[0xD34F]

methods: {
  marked: (text, search) => search
    ? text.replace(RegExp(search.replace(/[\\^$|.*?+{}()[\]]/g, '\\$&'), 'gi'), '<mark>$&</mark>')
    : text,
},

<div v-html="marked(text, search)"></div>

Если выделение должно пересекать границы тэгов, то стоит взять какую-нибудь готовую библиотеку под это дело, такую как, скажем, mark.js (пример использования совместно с vue).

Comments

[Horus123]

Спасибо!