Javascript code displayed on page

Question

I am attempting to change all instances of a given word on a page to another word. With the script I am using now, the word is changed, but then the javascript is displayed as well. What am I doing wrong?

<html>
<head>
</head>
<body>
This is a test of finding a word and changing it.
</body>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var $els = $(document.body); 
$els.each(function(){ 
$(this).html($(this).text().replace(/word/g, 'banana')); 
});
</script>
</html>

It's rendered as:

This is a test of finding a word and changing it. var $els = $(document.body); $els.each(function(){ $(this).html($(this).text().replace(/banana/g, 'banana')); });

I don't understand what you mean. I used JSFiddle to test your code and it's working how it's suppose to be. http://jsfiddle.net/k67pvx7k/ — Brian Moreno, Sep 05 '15 at 22:16

score 4 · Accepted Answer · edited May 23 '17 at 12:22

That's because you have the script in the page. You have placed the script tag outside the body tag, but you can't have anything there so the browser puts it inside the body element anyway.

As the script element is inside the body element, the text that you get using the text method will also include the script text but not the script tag, so when you put it back in the body element it will be plain text, not a script.

Put the script in the head tag instead:

<!DOCTYPE html>
<html>
<head>
<title>A valid document has a title</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){
  var $els = $(document.body); 
  $els.each(function(){ 
    $(this).html($(this).text().replace(/word/g, 'banana')); 
  });
});
</script>
</head>
<body>
This is a test of finding a word and changing it.
</body>
</html>

Note: Usually you would use the same method to get and put the text, so use either the text method or the html method for both.

Related: See this question about replacing text only in the text nodes in the page: How to replace text using jQuery (or plain JS) without breaking any events?

Thank you! This works! I had tried putting the `script` in the `head` element before, but hadn't put the code inside its own `function()` brackets, so it hadn't worked. I obviously have a lot to learn about JS! — DGill, Sep 06 '15 at 17:29
@DGill: Note that it's not just a function wrapper, `$(function(){ ... })` is the short form of `$(document).ready(function(){ ... })`, i.e. it binds the `ready` event with the function as event handler so that the code runs when the page has finished loading. — Guffa, Sep 06 '15 at 19:14

score 3 · Answer 2 · edited May 23 '17 at 12:14

Your code is:

Getting the body element
Converting the entire content of the body (which includes the script itself after the browser recovers form your invalid HTML) to plain text (so if you had any elements in the body you would be discarding them at this point)
Modifying that text
Treating that text as HTML and replacing the entire body with it

To solve the problem in a reasonable way, you need to touch only the text nodes (avoiding ones inside script elements) so that you don't rewrite any elements on the page along with the text.

So first you must get all the text nodes, and then loop over them to modify them.

var nodes = $(document.body).find(":not(iframe):not(script)").addBack().contents().filter(
  function() {
    return this.nodeType == 3;
  }
);

for (var i = 0; i < nodes.length; i++) {
  nodes[i].data = nodes[i].data.replace(/word/g, 'banana');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>This is a test of finding a <strong>word</strong> and changing it.</p>

score 0 · Answer 3 · answered Mar 27 '19 at 12:51

I had similar problem, but in very specific scenario - I needed to display some content in jQuery lightbox, but needed also some js code to be executed there as well. It was executed properly, but also shown in the lightbox due to the way how the lightbox was implemented - it worked the same way when I closed js script in a head section.

I've found a simple solution - maybe not the most elegant one, but working one for sure. I enclosed js script in div/span with non-display style - more or less, like this:

<div style="display:none;"><script type="text/javascript">MyFunction(document.getElementById('MyID'));</script></div>

Maybe you will find it useful in similar scenarios.

Why not? JavaScript code is parsed by browser like rest of body section - in this case it additionally is hidden from user. I'm aware that this solution is maybe against the good practices, however that was the only one I could force to work in that particular case. — Slav the Claw, Mar 27 '19 at 15:24

Javascript code displayed on page

3 Answers3