2

style.css

.red{
 background-color: red;
 }

content.js

var elements = document.getElementsByTagName('*');
for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var replacedText = text.replace(/яблок/gi,'<span class="red">pineapple</span>');


            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

введите сюда описание изображения

как видите добавляется в месте со спаном как сделать что спан применялся

2

1 ответ 1

1

Дело в том что вы создаете текстовый елемент, а вам нужно создавать елемент на основе разметки.

Creating a new DOM element from an HTML string using built-in DOM methods or Prototype

var elements = document.getElementsByTagName('*');
for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var replacedText = text.replace(/яблок/gi,'<span class="red">pineapple</span>');


            if (replacedText !== text) {
                  var div = document.createElement('div');
                  div.innerHTML = replacedText.trim();
                  element.replaceChild(div.firstChild, node);
            }
        }
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.