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
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:
- Do not rely on JavaScript only, have a fall-back to server-side method.
- A “noscript” warning is appropriate, see Ojambo.com No Script Tag Article.
- Reuse as much JavaScript as possible to keep optimal loading times.
🚀 Recommended Resources
Disclosure: Some of the links above are referral links. I may earn a commission if you make a purchase at no extra cost to you.
Comments
One response to “JavaScript Replace Text”