JavaScript Replace Text

On 4 minutes, 6 seconds read By Edward

Find and replace Text using JavaScript

JavaScript can be used to replace text dynamically. JavaScript can eliminate the reloading of a page to replace text on the server side. JavaScript DOM objects can be utilized to find and replace text.

Specific identifiers will be used to speedup the process of finding and replacing text. Tips from the Ojambo.com regular expressions article will be used to find specific text.

This tutorial uses JavaScript with HTML. The text to replace and the the replacement text are both declared in JavaScript variables.

    Tools are required:

  • Text editor.
  • HTML.
  • JavaScript.

  • Browser to view output.

Optional Download and install suitable text editor

Any text editor with regular expression support will work. To select a reviewed lightweight programming editor read the Ojambo.com Lightweight Programming Editors.

JavaScript-ReplaceText.html file

<!--
  JavaScript-ReplaceText.html
  
  Copyright 2011 Edward <http://ojambo.com>
  
  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
  
  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  MA 02110-1301, USA.
        
        
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com JavaScript Replace Text</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/JavaScript">
		function replaceText() {
			// Get the full content to be replaced
			originalContent = document.getElementById("original-content").innerHTML;

			// Specific match
			var specificMatch = "HERE";
			
			// Match is case sensitive and every occurrence (global = g)
			var matchText = new RegExp(specificMatch, "g");     
			
			// Replacement text
			var replacementText = "THERE";
			
			// Replace every occurrence of the match
			replacedContent = originalContent.replace(matchText, replacementText);


			// Overwrite the original content with the replaced content
			  document.getElementById("original-content").innerHTML = replacedContent;
		}	
	</script>
</head>

<body>
	<h2>Ojambo.com's JavaScript demonstration of text replacement</h2>
	<p id="original-content">The text to replace is HERE</p>
	<a href="#" onClick="replaceText();">Replace HERE with THERE</a>
</body>

</html>

The original content has an id identified by “original-content” which is used to assign the variable “originalContent”. The specific match text and replacement text are “HERE” and “THERE” respectively. The match is global which means every occurrence. After performing a match, the new text replaces the old text.

How to Use:

Run the JavaScript-ReplaceText.html file in your favourite browser.
Click the “Replace HERE with THERE” link.

Demonstration:

Ojambo.com’s JavaScript demonstration of text replacement

The text to replace is HERE

Replace HERE with THERE

Conclusion:

JavaScript was used to find and replace text dynamically. JavaScript eliminates the need of having to run server side code. Regular expressions and specific DOM identifiers are used to speed up the JavaScript find and replace process.

    Recommendations:

  1. Do not rely on JavaScript only, have a fall-back to server-side method.
  2. A “noscript” warning is appropriate, see Ojambo.com No Script Tag Article.
  3. Reuse as much JavaScript as possible to keep optimal loading times.