Заключите ключевые слова в двойные элементы

Я хотел бы попросить вас потратить пять минут своего времени, чтобы помочь мне с кодом ниже.

Мой опыт работы с JS очень ограничен, и я часами пытался сделать это, но безуспешно.

Любая помощь будет очень высоко ценится. Я использую JavaScript, который выделяет определенные ключевые слова в Интернете. Для этого сценарий заключает эти ключевые слова в тег , например:

 
<div><mark>highlighted keyword</mark></div>

Код (разметка): Функция, отвечающая за эту работу, заключается в следующем...

  key: "WrRn", value: function WrRn(node, start, end) { var elm = !this.opt.element ? 'mark' : this.opt.element, startNode = node.splitText(start), rtn = startNode.splitText(end - start); var replacement = document.createElement(elm); replacement.textContent = startNode.textContent; startNode.parentNode.replaceChild(replacement, startNode); return rtn; } 

Код (разметка): Мой вопрос заключается в следующем: как я могу заключить выделенное ключевое слово в два элемента, а не в один? Что-то вроде этого:

  <mark>highlighted keyword</mark> 

Код (разметка): Позже я воспользуюсь инструкцией setAttribute, чтобы применить некоторые стили CSS к элементу div.

Применение этого непосредственно к элементу «mark» не поможет, поэтому важно добавить и этот второй элемент. Если бы вы могли быть очень конкретными, это было бы здорово. Я использую этот сценарий ежедневно, и это улучшение имело бы для меня огромное значение. Спасибо, Алекс

Просто создайте другой элемент, добавьте к нему существующий дочерний элемент (метку), а затем заменитеChild новым элементом вместо метки.

 

var
rep_outer = document.createElement('div'),
rep_inner = rep_outer.appendChild(document.createElement(elm));

rep_inner.textContent = startNode.textContent;

startNode.parentNode.replaceChild(rep_outer, startNode);

Код (разметка): Также не забывайте, что addChild/insertBefore/replaceChild возвращают вставленный элемент.

Вы можете использовать это, чтобы упростить свой код в некоторых местах.