admin管理员组

文章数量:1391987

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 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')); });

  • javascript
  • jquery
  • html
Share Improve this question edited Sep 5, 2015 at 22:39 Toby Allen 11.3k12 gold badges79 silver badges131 bronze badges asked Sep 5, 2015 at 22:11 DGillDGill 911 silver badge7 bronze badges 2
  • 1 I don't understand what you mean. I used JSFiddle to test your code and it's working how it's suppose to be. jsfiddle/k67pvx7k – Brian Moreno Commented Sep 5, 2015 at 22:16
  • You probably have a missing delimiter somewhere – Dave Commented Sep 5, 2015 at 22:18
Add a ment  | 

3 Answers 3

Reset to default 4

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?

Your code is:

  1. Getting the body element
  2. 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)
  3. Modifying that text
  4. 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./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>

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.

本文标签： jqueryJavascript code displayed on pageStack Overflow

版权声明：本文标题：jquery - Javascript code displayed on page - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744653726a2617839.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。