Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
JavaScript regex - How to replace special characters?
Characters that are neither alphabetical nor numeric are known as special characters. Special characters are essentially all unreadable characters, including punctuation, accent, and symbol marks.
Remove any special characters from the string to make it easier to read and understand. Before we jump into the article let's have a quick view on the regex expression in JavaScript.
Regex Expression in JavaScript
Regular expressions are patterns that can be used to match character combinations in strings. Regular expressions are objects in JavaScript. These patterns can be used with the exec() and test() methods of RegExp as well as the match(), matchAll(), replace(), replaceAll(), search(), and split() methods of String.
Syntax
Following is the syntax for regex expression ?
/pattern/modifier(s);
Let's dive into the article for getting better understanding on how to replace special characters. For this we use replace() method.
Replace Special Characters Using replace() Method
The JavaScript built-in method string.replace() can be used to replace a portion of a supplied string with another string or a regular expression. The original string won't alter at all.
Syntax
Following is the syntax for replace()
string.replace(searchValue, newValue)
To learn more about replacing special characters, let's look at the following examples.
Example 1: Remove All Special Characters
In the following example, we are running the script to replace all the special characters using replace().
<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6">
<script>
var statement = "We#@lcome!! To! The@ Tutorials$Point%";
var result = statement.replace(/[^a-zA-Z ]/g, "");
document.write(result);
</script>
</body>
</html>
Welcome To The TutorialsPoint
Example 2: Replace Special Characters with Specific Character
Considering the following example, where we are running the script to replace special characters using replace().
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<button onclick="replacespecial()">Click To Change</button>
<p id="tutorial1"></p>
<script>
var element_up = document.getElementById("tutorial");
var element_down = document.getElementById("tutorial1");
var statement = "Th@e B$es^t E-w#ay Le*arn(ing";
element_up.innerHTML = statement;
function replacespecial() {
element_down.innerHTML =
statement.replace(/[&\/\#, +()$~%.'":@^*?<>{}]/g, '!');
}
</script>
</body>
</html>
Original: Th@e B$es^t E-w#ay Le*arn(ing After clicking button: Th!e B!es!t E!w!ay Le!arn!ing
Example 3: Custom Function to Remove Special Characters
Execute the below script and observe how all the special characters are replaced using a custom function.
<!DOCTYPE html>
<html>
<body>
<script>
let statement = "T!P, Wher$%e Y@ou F*ind L@ot O!f Courses"
function replacespecial(_value){
var lowerCase = _value.toLowerCase();
var upperCase = _value.toUpperCase();
var replacement = "";
for(var i=0; i<lowerCase.length; ++i) {
if(lowerCase[i] != upperCase[i] || lowerCase[i].trim() === '' ||
lowerCase[i].trim() === "." || lowerCase[i].trim() === ",")
replacement += _value[i];
}
return replacement;
}
let result = replacespecial(statement)
document.write(result)
</script>
</body>
</html>
TP, Where You Find Lot Of Courses
Common Regex Patterns
Here are some common regex patterns for replacing special characters:
| Pattern | Description | Example |
|---|---|---|
/[^a-zA-Z0-9]/g |
Remove all non-alphanumeric | "Hello@123!" ? "Hello123" |
/[^a-zA-Z ]/g |
Keep only letters and spaces | "Hello@World!" ? "Hello World" |
/[!@#$%^&*()]/g |
Remove specific symbols | "Hello@World!" ? "HelloWorld" |
Conclusion
The replace() method with regex patterns provides a powerful way to remove or replace special characters in JavaScript strings. Use /[^a-zA-Z0-9]/g to remove all special characters or create custom patterns for specific requirements.
13K+ Views
