Home » jQuery28 January 2010

jQuery: How to replace string, div content and image src?

In this article, I will be showing you how you can replace string, div content, and image src value with jQuery.

You can do this by replace() function in jQuery.

View Demo || Download Code

Here is the code to replace string. This will replace the ‘smile’ text with ‘be happy’.

var oldText = "Save Earth and smile!";
var newText = oldText.replace("smile", "be happy");

Here is the code to replace image src. The following code replaces ‘hills’ with ‘sunset’.

$(".img").attr("src").replace("hills", "sunset");

Here is the code to replace div content. The following code replaces the text ‘First’ with ‘This is the first’.

$("#one").text().replace("First", "This is the first");

Here is the full source code:

<html>
<head>
<title>jQuery: Replace</title>
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){								
		$("#change").click(function(){	
			var newSrc = $(".img").attr("src").replace("hills", "sunset");
			$(".img").attr("src", newSrc);			
			
			var oneDiv = $("#one").text().replace("First", "This is the first");
			$("#one").text(oneDiv);
			
			var oldText = "Save Earth and smile!";
			var newText = oldText.replace("smile", "be happy");
			$("#two").text(newText);
		});
		
		$("#refresh").click(function(){
			location.reload();
		});
		
	});
</script>
<style>
	#one {
		border: 1px solid #CCCCCC;
		margin: 10px;
		width: 300px;
	}
	#two {
		border: 1px solid #CCCCCC;
		margin: 10px;
		width: 300px;
	}
</style>
</head>
<body>
<div align="center">	
	<img class="img" src="hills-thumb.jpg" alt="image" />

	<div id="one">
	First div.
	</div>

	<div id="two">
	Second div.
	</div>
	
	<button id="change"> Change </button> 
	<button id="refresh"> Refresh </button>
</div>
</body>
</html>

View Demo || Download Code

Cheers,

From Mukesh Chapagain's Blog, post jQuery: How to replace string, div content and image src?

php magento mukesh chapagain

Get New Post by Email

Find me on

Facebook Twitter Google+ LinkedIn RSS Feed
  • http://www.mobile-mobiles.net Mobiles

    Thanks its help full

  • http://www.ooty.me ooty

    What is the difference between java script replace and jquery replace

  • Antony492

    Nothing

  • http://mytravelanywhere.blogspot.com/ Liezl ~lzlpio90~

    How about if we do have many images to inter-swap? 

  • http://chhito.com/ Online Trade Nepal

    Very useful artice. Thanks for sharing.

  • Alcor

    Thanks, your article was helpful to me.