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

Thanks.