Replace text on webpage using javascript

Question

I am trying to replace some text on my sites page using javascript. I must use javascript because the replacement is dependent on the site resolution. However I found that the code bellow doesn't work. Why is it? Does similar things work on iphone (these javascript functions)? Thanks.

<SCRIPT language="JavaScript">
<!--
if ((screen.width<=500))
{
 document.body.innerHTML = document.body.innerHTML.replace('text to replace', 'replacement');
}
//-->
</SCRIPT>

• Brana: by not work I mean that it doesn't replace anything.
• bodagetta: That code is correct and will replace the first instance of 'text to replace' with 'replacement'. Maybe your issue is that the code is being executed before the page is fully loaded? Where are you placing this script block in your HTML file?
• Brana: in the middle of it. Where should i place it?
• Brana: True, i added at the end of the page and now it works. thanks.
• bodagetta: Glad you got it working! You can put it anywhere if you listen for an event that the DOM has been fully loaded: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Answer 1

The screen property does not have a resize cause it's like they built it in the factory :)
You're probably interested in window.innerWidth

probably you're also interested in listening for a resize event so here you go:

function doOnResize() {
 var winW = window.innerWidth;
 if(winW <= 500) {
 document.body.innerHTML = document.body.innerHTML.replace('text to replace', 'replacement');
 }
}
doOnResize(); // Do it as soon as you can
window.addEventListener("resize", doOnResize); // and on window resize

Also make sure to place the above <script> right before the closing </body> tag. This will make sure that the JS parser is in known about the DOM content before searching and replacing text.

• Brana: Resize has nothing to do with my question. I gues that you have misunderstood it.
• Roko C. Buljan: @Brana yes, I understood your question perfectly since it's working in my example: jsbin.com/qabehabayu/1/edit?html,js,output
• Brana: The code works the same even just using width. My code didn't work because it was placed in the middle of the page and not just before the body tag.
• Brana: Once i placed the script in the proper place I found out that screen.width doesn't work while window.innerWidth works. Could you please explain why it is the case?
• Roko C. Buljan: @Brana on mobile and desktop a screen width will always be the same. Screen property represents the physical Screen, while window is the Browser's window object, which on desktop is usually smaller than screen logically, and on resize you can than catch the desired values. So yes, use window in any case.

Answer 2

Your code does not work because it is executed before the DOM is ready.

window.onload = function() { /* Your code here */ };

This will make sure the DOM is ready and everything is loaded.

• Brana: <SCRIPT language="JavaScript"> window.onload = function() { <!-- document.body.innerHTML = document.body.innerHTML.replace('text to replace', 'replacement'); //--> } </SCRIPT>
• Wio: Don't put HTML comment indicators <!-- --> inside your JavaScript code, because they might break it.

Answer 3

What about using css and js (well, jquery would probably be best) to change the display attribute of the element on the event that triggers the text change?

• Brana: I use media queries but this is browser specific and I cannot get browser version in css (as media query). At least i think so.
• ByteSizedGurl: Perhaps restating the question along with the technologies/platforms/versions where you are having this issue will help with the solution. You state it is a website and then ask if this same thing happens in an iphone so it is a bit confusing, at least for me.
• Brana: no need I already got the answer in a comment. I didn't place the javascript properly.
• ByteSizedGurl: All in all, the js you are using is js whereas if you use a library like jquery then the browser shouldn't be an issue. Maybe this might help w3schools.com/cssref/css3_pr_mediaquery.asp