Оберните несколько указанных слов пробелом в jQuery?

Question

Я хотел бы узнать наиболее удобный способ обернуть некоторые указанные слова с помощью тегов span.

Пример: У меня есть слово, которое является собакой. Вот оригинальный текст:

I have a dog, do you have a dog? 

И результат должен быть таким:

I have a <span class="highlight">dog</span>, do you have a <span class="highlight">dog</span>? 

Любая помощь?

EDIT: Обратите внимание, что он также должен обертывать слова, даже если они не являются интуитивными (Peter-dog). Надеюсь, вы поняли.

Answer 1

Полезная информация jQuery plugin.

Это действительно прост в использовании, и он отлично работает.

— Это очень старый ответ. Я сожалею, что просто связал библиотеку Lettering.js без включения ее имени. Библиотека полезна, хотя я не уверен здесь через 7 лет, продолжает ли г-н Руперт активно ее поддерживать.

Что такое надпись - это переходы между текстовыми узлами в выбранной области DOM и обертывание отдельных букв и/или слов (настраиваемых) в тегах <span>, которые затем могут быть оформлены в стиле. Это просто, но эффективно. Даже если вы не хотите его использовать, код не очень обширен и учебный.

Answer 2

Вы можете использовать JavaScript replace function. Вот простой пример:

$('#container').html($('#container').html().replace(/(dog)/g,'<span class="highlight">$1</span>'));