Как правильно найти и обернуть в теги кавычки?

Question

Допустим, что есть такая структура (3 вида элементов p).

// ...Много похожих элементов
<p>Элемент &lt;<span class="red">script</span>&gt; - очень хороший элемент.</p>
<p>Текст без символов-мнемоников, но имеет <b>элементы</b> внутри</p>
<p>Текст без символов-мнемоников и без узлов-элементов внутри</p>
// ...Много похожих элементов

Можно примерно так с помощью JS найти все элементы <p>, которые могут иметь мнемоники (кавычки, в моём случае).

let textElements = Array.from(document.querySelectorAll("p")).filter( item => item.firstElementChild );

В общем, мне нужно через JS обернуть каждую кавычку на странице в тег <b>. Через textContent это сделать нельзя, так что самый очевидный для меня вариант - innerHTML. Проблема в том, что в innerHTML есть теги, а значит и лишние кавычки, при выделении которых всё сломается. И ещё, при добавлении в цикле индексы сдвигаются, что усложняет задачу. Как это правильно сделать?

Answer 1

document.querySelectorAll('p').forEach(p =>
  p.innerHTML = p.innerHTML.replace(/&\w+;/g, `<b>$&</b>`)
)

b {
  color: red;
}

<p>Элемент &lt;<span class="red">script</span>&gt; - очень хороший элемент.
Элемент &lt;<span class="red">script</span>&gt; - очень хороший элемент.
Элемент &lt;<span class="red">script</span>&gt; - очень хороший элемент.
Элемент &lt;<span class="red">script</span>&gt; - очень хороший элемент.</p>
<p>Текст без символов-мнемоников, но имеет <b>элементы</b> внутри</p>
<p>Текст без символов-мнемоников и без узлов-элементов</p>

БЛОГ НА HUSL

Как правильно найти и обернуть в теги кавычки?

Ответы (1 шт):