Заменить все экземпляры строки на веб-странице на Javascript

Итак, я делаю расширение Chrome, и я хотел бы иметь его, чтобы расширение имело две кнопки, один для включения расширения, а один для выключи. Пока расширение работает, я хотел бы, чтобы он заменил все экземпляры на веб-странице «ab» на «ef» (просто пример). Это означает, что после того, как пользователь нажимает, расширение ВСЕГДА преобразует «ab» в «ef» на каждую веб-страницу без необходимости включать ее каждый раз. Я делаю это с помощью Javascript. Вот мой код (HTML и Javascript), посмотрите, что вы можете сделать!Заменить все экземпляры строки на веб-странице на Javascript

JSFiddle: https://jsfiddle.net/syf5f687/

HTML:

<!doctype html> 
<html> 
    <head> 
    <title>AB to EF</title> 
    <script src="popup.js"></script> 
    </head> 
    <body> 
    <h1>AB to EF Converter</h1> 
    <button id="turnOn">Turn On</button> 
    <button id="turnOff">Turn Off</button> 
    </body> 
</html>

JS (который я думаю, это совершенно неправильно, я даже не положил на кнопку выключить):

var markup = document.documentElement.innerHTML; 

document.addEventListener('DOMContentLoaded', function() { 
    var checkPageButton = document.getElementById('turnOn'); 
    checkPageButton.addEventListener('clickOn', function() { 



    chrome.tabs.getSelected(null, function(tab) { 
     markup.replace(/ab/, "ef") 
    }); 
    }, false); 
}, false);

источник

2016-09-07 ThatCrazyCow

Относящиеся/рядом Дубликат: [Замена много текста в аддон браузера] (http://stackoverflow.com/questions/37562475/replacing-a-lot -of-text-in-browsers-addon) – Makyen

Вам также необходимо узнать, как получить доступ к DOM веб-страницы, который ваш код указывает, что вы этого не делаете. См. [Как получить доступ к веб-странице DOM, а не к странице расширения DOM?] (Http://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension- page-dom) – Makyen

Как минимум, важно ознакомиться с [Обзор расширений Chrome] (https://developer.chrome.com/extensions/overview). Чтение и понимание, которые помогут вам избежать многих ошибок. – Makyen

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

Я предлагаю пройти через текстовые узлы и заменить свойство textContent.

Вы можете сделать это, используя TreeWalker api. Создайте пешеход с createTreeWalker(), переходя в NodeFilter.SHOW_TEXT, чтобы только выделить текстовые узлы, а затем заменить textContent на каждый узел.

var element = null; 
var walker = document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false); 
while(element=walker.nextNode()){ 
    element.textContent = element.textContent.replace(/ab/g,"ef"); 
}

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

Demo

function changeIt() { 
 
    var element = null; 
 
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false); 
 
    while (element = walker.nextNode()) { 
 
    element.textContent = element.textContent.replace(/ab/g, "ef"); 
 
    } 
 
} 
 
document.querySelector("button").addEventListener("click",changeIt);

div { 
 
    padding:5px; 
 
    border:1px solid rgba(0,0,0,0.3); 
 
}

<button>Change text</button> 
 
<div> 
 
    able, dabble, fabble, crabble 
 
    <span>mable, cable, fable</span> 
 
</div> 
 
<div> 
 
    able, dabble, fabble, crabble 
 
    <span>mable, cable, fable</span> 
 
</div> 
 
<div> 
 
    able, dabble, fabble, crabble 
 
    <span>mable, cable, fable</span> 
 
    <div> 
 
    able, dabble, fabble, crabble 
 
    <span>mable, cable, fable</span> 
 
    <div> 
 
     able, dabble, fabble, crabble 
 
     <span>mable, cable, fable</span> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-09-08 00:07:22

Хотя это хорошо описывает, как выполнять фактическую замену, из кода OP ясно, что ему также необходимо понять, как реализовать инъекцию скрипта контента, чтобы получить доступ к DOM веб-страницы. Без покрытия этого (или даже упоминания) это лишь часть ответа. – Makyen

Заменить все экземпляры строки на веб-странице на Javascript

ответ

Смежные вопросы