Как я могу использовать JQuery, чтобы заменить все вхождения определенного слова на веб-странице?

Question

Я сделал две разные попытки заменить все вхождения одного слова на веб-странице с помощью JQuery в расширении Chrome.Обе попытки вида работали, но ни одна из них не работала как универсальный метод для замены всех вхождений слова на веб-странице.

Как мне написать скрипт, который заменяетвсе вхождения определенного слова на веб-странице?

Подробнее о 2 разных попытках, которые оба вида сработали, но по разным причинам не удалось.

Попытка 1: Заменить текст узлов, которые не имеют дочерних элементов.Это терпит неудачу в случаях, когда дочерние узлы используются для форматирования.Например, происходит сбой при разборе следующего:

<p>StringToReplace <strong>doesn't</strong> get replaced!</p>

Точный код, который я использовал для этой попытки:

$("*").each(function () {
    if ($(this).children().length == 0) { 
        $(this).text(replaceStrings($(this).text()));
    } 
}

(replaceStrings - это отдельная функция с кучей произвольных вызововзаменить)

Попытка 2: заменить HTML узлов, которые, вероятно, содержат только текст (например, p).Это не удается, потому что на некоторых веб-страницах, над которыми должен работать мой сценарий, текст должен отображаться прямо внутри тегов, например body.Если я попытаюсь заменить текст HTML тела, это приведет к нежелательному побочному эффекту нарушения функциональности на некоторых страницах.IMO, это было бы кошмаром, чтобы попытаться обработать каждый крайний случай, когда функциональность сайта нарушена, заменив HTML на body или div s вверх по дереву DOM.

Код, который я использовал для этой второй попытки:

$("*").each(function () { 
    if (
        $(this)[0].nodeName.toLowerCase() == "font"
        || $(this)[0].nodeName.toLowerCase() == "span"
        || $(this)[0].nodeName.toLowerCase() == "p"
        //|| $(this)[0].nodeName.toLowerCase() == "body"
        // || $(this)[0].nodeName.toLowerCase() == "div" 
        ){
        $(this).html(replaceStrings($(this).html()));
    }
}

Как мне написать скрипт, который заменяет все вхождения определенного слова на веб-странице?

Спасибо!

Answer 1

Мне не нравится плагин в первом ответе, потому что он работает только на 1 уровень. Вот версия, которая проходит через всю структуру под выбранным элементом.

Использование: $(".content").replaceText("visitor","John Doe");

// Replace occurences of 'search' with 'replace' anywhere in the element. 
// New HTML tags will be rendered, except if 'text_only' is true. 
$.fn.replaceText = function(search, replace, text_only) {  
    return this.each(function(){  
        var v1, v2, rem = [];
        $(this).find("*").andSelf().contents().each(function(){
            if(this.nodeType === 3) {
                v1 = this.nodeValue;
                v2 = v1.replace(search, replace);
                if(v1!=v2) {
                    if(!text_only && /<.*>/.test(v2)) {  
                        $(this).before( v2 );  
                        rem.push(this);  
                    }
                    else this.nodeValue = v2;  
                }
            }
        });
        if(rem.length) $(rem).remove();
    });
};

Answer 2

Я не проверил это полностью, но оно должно указать вам правильное направление:

$('*', 'body')
    .andSelf()
    .contents()
    .filter(function() {
        return this.nodeType === 3;
    })
    .each(function() {
        this.nodeValue = replaceStrings(this.nodeValue);
    });

(на основе этого ответа вместе с помощью этого плагина )