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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.