Как выделить текст в HTML, игнорируя теги, не разбивая действительный HTML? ⇐ Html

[Anonymous]

Я пытаюсь выделить текст в строке HTML, игнорируя любые теги HTML внутри текста. Тем не менее, мой текущий подход иногда охватывает только часть текста и разбивает структуру HTML. > Я хочу выделить справочный текст , даже если он разделен на теги HTML без разрыва структуры HTML.

Пример ввода и ожидаемый выход

input:

Код: Выделить всё

let originalHtml = "This is a sample[/b] text with [i]some[/i] formatting.";[b]let referenceText = "sample text";
let ideaId = 123;
let highlightTag = `highlight_${ideaId}`;

ожидаемый вывод (допустимый HTML):

Код: Выделить всё

This is a sample[/b] text with [i]some[/i] formatting.[b]< /code>
Тег выделения должен обернуть всю соответствующую фразу < /strong>, сохраняя HTML -теги внутри него. < /p>

[h4] [b], что я попробовал [/b] [/h4]
Я написал эту функцию, чтобы попытаться заменить:
function highlightTextIgnoringTags(originalHtml, referenceText, highlightTag) {
let text = referenceText.replace(/[-/\^$*+?.()|[\]{}]/g, "\\$&"); // Escape special regex characters
let textWithTags = text.replace(/\s/g, "(?:\\s|]+>)*"); // Allow spaces and tags
let regex = new RegExp(`(${textWithTags})`, "gi"); // Case-insensitive regex

return originalHtml.replace(regex, (match) => highlightTag.replace('$0', match));
}

Тем не менее, вывод, который я получаю, является неверным :

Код: Выделить всё

This is a sample[/b] text with [i]some[/i] formatting.

Это разбивает HTML, потому что тег открывается до , но закрыт вне его.
< hr />
Вопрос < /strong> < /h4>
Как я могу изменить свою функцию, чтобы правильно обернуть всю сопоставленную фразу при обеспечении действительного HTML ? Есть ли лучший подход с использованием DOM -анализации или другого метода? < /P>
Любая помощь будет высоко оценена!

Подробнее здесь: https://stackoverflow.com/questions/794 ... valid-html