All geek questions in one place

Replace text on website

I want to replace the text on a webpage (on any webpage where I want to run it) using JavaScript. I am not an expert in JavaScript, so I kind of lost. If I can help, I would like to avoid jQuery.

Through Google, I found this stack question. But when I insert document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi'); into a web page, it looks like a mess on the page up. It seems that the page will return to the main text and formatting.

Also, I am wondering if regex code from here can be used. Again, I'm really not sure how to use it. What he will do is replace only the text of the web page - not links or file names.

I use Google Chrome, which matters.

+4
source share
2 answers

You can do your recalculations on all text nodes in the DOM:

 function replaceTextOnPage(from, to){ getAllTextNodes().forEach(function(node){ node.nodeValue = node.nodeValue.replace(new RegExp(quote(from), 'g'), to); }); function getAllTextNodes(){ var result = []; (function scanSubTree(node){ if(node.childNodes.length) for(var i = 0; i < node.childNodes.length; i++) scanSubTree(node.childNodes[i]); else if(node.nodeType == Node.TEXT_NODE) result.push(node); })(document); return result; } function quote(str){ return (str+'').replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1"); } }

Quote function borrowed from this answer.

Using:

 replaceTextOnPage('hello', 'hi');

Note that you need SHIM forEach in older browsers or replace this code in the same way:

 var nodes = getAllTextNodes(); for(var i = 0; i < nodes.length; i++){ nodes[i].nodeValue = nodes[i].nodeValue.replace(new RegExp(quote(from), 'g'), to); }
+5
source

Recently, I had to perform a similar problem, and I came up with something similar to this:

 <!DOCTYPE html> <html> <head> <title>HTML JS REPLACE</title> <script type="text/javascript"> function convert(elem) { var content = document.getElementById(elem).innerHTML; // get HTML content for the given element var pattern = new RegExp(/hello/gi); content = content.replace(pattern,'hi'); document.getElementById(elem).innerHTML = content; // put the replace content back } </script> </head> <body> <div id="content"> Some text that includes both hello and hi. And a hello. </div> <script type="text/javascript"> window.onload = convert('content'); </script> </body> </html>

As a result, you will receive a page with the message:

Some texts containing both hello and hello. And hi.

while the original source still says:

Some text that includes both hello and hello. And hi.

Complicated bits are just a few - first, you want the window.onload trigger to turn on at the bottom of the body, so the DOM loads completely before running JS on it. Secondly, you must have a top-level element to which you assign a unique identifier that you can reference in JS. Third, the conversion function uses a regular expression that performs a global case-insensitive replacement for the string "hello", changing it to "hello."

In your specific application, you may need to instead capture all occurrences and then analyze them in a loop, which may (or may not) cause some performance issues. Be careful:)

+1
source

Source: https://habr.com/ru/post/1499222/

More articles:


All Articles