Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Dynamically Replace Data Based on Matched Regex in JavaScript
Regex (or Regular Expressions) is used to match patterns in strings of text. With JavaScript, you can use regex to dynamically replace data based on matched patterns.
This article will explain how to use regex and JavaScript together to make dynamic replacements in your code. We'll cover the basics of regex syntax, regular expression objects, and methods for using them with JavaScript.
JavaScript offers various data types to store various types of values. Because the JavaScript engine uses variables in a dynamic manner, it is not necessary to specify the type of a variable when using JavaScript. Here, the data type must be specified using var. It can store any kind of value, including strings, numbers, and more.
Using replace() in JavaScript
The replace() method in JavaScript is used to search a string for a specified value, or a regular expression, and return a new string where the specified values are replaced. The original string is unchanged by the replace() method.
Syntax
Following is the syntax for replace()
string.replace(searchValue, newValue)
To get clear understanding on ?Dynamically changing the data based on matched regex, let's look into the following example.
Example
In the following example, we are using a regex expression and passing it to a function. Then the functions get replacement keys as input, replace them if available, and display the result with a line break.
<!DOCTYPE html>
<html>
<body>
<script>
const Original= "#T1# to the #T2# the #T3# E-way learning";
const replacements = {
T1: "Welcome",
T2: "Tutorialspoint",
T3: "Best"
};
const afterchange = Original.replace(/#([^#]+)#/g, (match, key) => {
return replacements[key] !== undefined ? "<br />" + replacements[key]: "";
});
document.write("Original:", Original+"<br>");
document.write("afterchange:", afterchange);
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of the original template along with a replaced template displayed on the web-browser, caused by the event that gets triggered on executing the script.
Example
Consider the following example, where we are using the regex expression to dynamically replace the data used in the script.
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
var val = {
"address_1": "Yes",
"address_2": "Hyderabad",
"address_10": "Permanent",
}
var sentence = `Can I Know The Address: #ADDRESS1# You Are From:#ADDRESS2# Is It Current Or Permanent: #ADDRESS10#`
sentence = sentence.replace(/#ADDRESS(\d+)#/g, function(addr, num) {
var str = val["address_"+num]; return str?str+"<br/>":""
})
document.getElementById("tutorial").innerHTML=(sentence);
</script>
</body>
</html>
On running the above script, the web-browser displays the sentence that was compared with the regex expression and get replaced on the webpage by the event that got triggered on running this script.
Example
Execute the below code to observe how the regex expression was used to dynamically change the value.
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
var temp = `My name is {{fullName}} I live in {{countryName}}`;
var details = {
"fullName": "David Miller",
"countryName": "AUS"
}
replaceName = temp.replace(/\{\{(.+?)\}\}/g, (matching, value) => details[value.trim()]);
document.getElementById("tutorial").innerHTML=(replaceName);
</script>
</body>
</html>
When the script gets executed, the event gets triggered, which makes the given sentence compare with a regex expression and get replaced, and then displays the replaced sentence.
3K+ Views
