How to replace text in a html document using Javascript
Question
I have written this code which I thought was correct, but although it runs without error, nothing is replaced. Also I am not sure what event I should use to execute the code.
The test a simple template for a landing page. The tokens passed in on the url will be used to replace tags or tokens in the template.
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> // gets passed variables frm the url function getQueryVar(str) { return 'Newtext'; // JUST SCAFFOLD FOR TESTING } function searchReplace() { /**/ var t = 0; var tags = Array('keyword', 'locale', 'advert_ID'); if (document.readyState === 'complete') { var str = document.body.innerText; for (t = 0; t < tags.length; t++) { //replace in str every instance of the tag with the correct value if (tags[t].length > 0) { var sToken = '{ltoken=' + tags[t] + '}'; var sReplace = getQueryVar(tags[t]); str.replace(sToken, sReplace); } else { var sToken = '{ltoken=' + tags[t] + '}' var sReplace = ''; str.replace(sToken, sReplace); //str.replace(/sToken/g,sReplace); //all instances } } document.body.innerText = str; } } </script> </head> <body> <H1> THE HEADING ONE {ltoken=keyword}</H1> <H2> THE HEADING TWO</H2> <H3> THE HEADING THREE</H3> <P>I AM A PARAGRAPH {ltoken=keyword}</P> <div>TODO write content</div> <input type="button" onclick="searchReplace('keyword')"> </body> </html>
So when the documment has finished loading I want to execute this code and it will replace {ltoken=keyword} withe value for keyword returned by getQueryVar. Currently it replaces nothing, but raises no errors
2 answers
solution1
0 2019-04-15 11:05:06
Your problem is the fact you don't reassign the replacement of the string back to it's parent.
str.replace(sToken,sReplace);
should be
str = str.replace(sToken,sReplace);
The .replace method returns the modified string, it does not perform action on the variable itself.
solution2
0 2019-04-15 11:08:29
Use innerHTML instead innerText and instead your for-loop try
tags.forEach(t=> str=str.replace(new RegExp('{ltoken='+ t+'}','g'), getQueryVar(t)))
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> // gets passed variables frm the url function getQueryVar(str) { return'Newtext';// JUST SCAFFOLD FOR TESTING } function searchReplace() { /**/ var t=0; var tags =Array('keyword','locale','advert_ID'); if (document.readyState==='complete'){ var str = document.body.innerHTML; tags.forEach(t=> str=str.replace(new RegExp('{ltoken='+ t+'}','g'), getQueryVar(t))); //tags.forEach(t=> str=str.replace(new RegExp('{ltoken='+ tags[t]+'}', 'g'), getQueryVar(tags[t]))); document.body.innerHTML=str; } } </script> </head> <body > <H1> THE HEADING ONE {ltoken=keyword}</H1> <H2> THE HEADING TWO</H2> <H3> THE HEADING THREE</H3> <P>I AM A PARAGRAPH {ltoken=keyword}</P> <div>TODO write content</div> <input type ="button" onclick="searchReplace('keyword')" value="Clicke ME"> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.