Regex: изменить все текстовое содержимое на странице html, но не изменять текст в атрибуте

Question

У меня есть следующие слова:

<a class="logo-home" href="#" title="abc xyz">abc xyz</a>
<img src="#" title="abc xyz" alt="abc xyz"/>
<h1>abc xyz</h1>
<p>blabla... abc xyz ... blabla</p>

Я хочу изменить строку "ab c xyz" на <span style="white-space:nowrap;">abc xyz</span> Для этого я использую этот код:

document.body.innerHTML = document.body.innerHTML.replace(/abc xyz/g, "<span style="white-space:nowrap;">abc xyz</span>");

Но я не хочу изменять текст в атрибуте title или atl элемента. Все, что я хочу, это просто изменить текстовое содержимое элемента. Я пробую некоторые регулярные выражения, но проблема все еще остается. У кого-нибудь есть совет для меня? Большое спасибо.

Answer 1

Если использование регулярных выражений здесь на самом деле не является обязательным, я бы предложил другой подход (например, исследование дерева) PCRE): вам нужно убедиться, что за вашей строкой «ab c xyz» следует «<» перед «>», верно? Следовательно, попробуйте

abc xyz(?=[^<>]*<)

Пояснения:

1. abc xyz читает символы ab c xyz
2. (?=[^<>]*<) - это взгляд в будущее: он не потребляет какого-либо символа, а просто проверяет, что внутреннее регулярное выражение имеет успех. Поэтому мы должны читать символы, которые не являются , а затем <</li>

Пример:

'<a class="logo-home" href="#" title="abc xyz">abc xyz</a>\
<img src="#" title="abc xyz" alt="abc xyz"/>\
<h1>abc xyz</h1>\
<p>blabla... abc xyz ... abc xyz ... blabla</p>'
.replace(/abc xyz(?=[^<>]*<)/g, 'hello world')

Результат: <a class="logo-home" href="#" title="abc xyz">hello world</a><img src="#" title="abc xyz" alt="abc xyz"/><h1>hello world</h1><p>blabla... hello world ... hello world ... blabla</p>

Answer 2

Похоже, вы используете Regex в JavaScript для замены html. Пожалуйста, не используйте Regex для разбора HTML. Это плохая практика . Вместо этого используйте DOMParser().

Но если ваша строка короткая и структура HTML аналогична упомянутой в вопросе, попробуйте следующее:

var str = `<a class="logo-home" href="#" title="abc xyz">abc xyz</a><img src="#" title="abc xyz" alt="abc xyz"/>
<h1>abc xyz</h1>
<p>blabla... abc xyz ... blabla</p>`;

str = str.replace(/(?<=\<.*?\>.*)(abc\sxyz)(?=.*\<\/\w+\>)/g,'<span style="white-space:nowrap;">$1</span>');

console.log(str);