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:
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 2This 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')); });
- 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
3 Answers
Reset to default 4That'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:
- 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./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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744653726a4586055.html
评论列表（0条）