const replaceWords = ['правило', 'мир', 'уголок', 'нас'];
const wrapper = document.createElement('span');
wrapper.setAttribute('title', 'тут подсказка');
wrapper.classList.add('glossary-term');
wrapper.dataset.toggle = 'tooltip';
wrapper.dataset.placement = 'right';
const letter = '[\\wА-ЯЁа-яё-]';
const re = new RegExp(`(?<!${letter})(${replaceWords.join('|')})(?!${letter})`, 'ui');
const wrapWords = node => {
if (node.nodeType === Node.TEXT_NODE) {
const { parentNode } = node;
let currentNode = node;
while (currentNode?.nodeValue.match(re)) {
currentNode.nodeValue.replace(re, ({ length }, _, offset) => {
const range = new Range();
range.setStart(currentNode, offset);
range.setEnd(currentNode, offset + length);
range.surroundContents(wrapper.cloneNode(true));
});
currentNode = currentNode.nextSibling?.nextSibling;
}
} else if (node.nodeType === Node.ELEMENT_NODE) {
[node.childNodes].forEach(wrapWords);
}
};
const processHTML = htmlString => {
const template = document.createElement('template');
template.innerHTML = htmlString;
const fragment = template.content;
[fragment.childNodes].forEach(wrapWords);
const div = document.createElement('div');
div.appendChild(fragment);
return div.innerHTML;
};
const sampleHTML = `
<div>
<span style="font-size:12px;">
<strong>Второе правило</strong> - надо действовать. Вместо того, чтобы жаловаться на абсурдность мира,
постараемся преобразить тот test уголок, куда забросила нас судьба.
</span>
</div>
`;
const resultHTML = processHTML(sampleHTML);
const output = document.createElement('code');
output.textContent = resultHTML;
document.body.appendChild(output);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.