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

Facebook Tweet LinkedIn Pin Print EmailShares

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.

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.

Related posts: