String Methods
Mostly used string methods with RegExp in JavaScript
- turned_in_notMethods
search()replace()match()split()
search( )
It's used to find the start index position of the match string or sub-string within your text content if found, else returns -1
- Always finds the first match &
Remember, here index starts from 0
Syntax
string.search(RegExPattern)Hello john, how are you john, You can modify the text
Click on above button to find the first match start index
function fun() {
var text=document.getElementById("text1").textContent;
var result=document.getElementById("result1");
result.textContent="Pattern start index : "+text.search(/john/);
}<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<script>
function fun() {
var text=document.getElementById("text1").textContent;
var result=document.getElementById("result1");
result.textContent="Pattern start index : "+text.search(/john/);
}
</script>
</head>
<body>
<p id="text1" contenteditable>Hello john,how are you john, You can modify the text</p>
<button onclick="fun()">search(/john/)</button>
<p id="result1">Click on above button to find the first match start index</p>
</body>
</html>replace( )
It's used to replace any string or sub-string within your text content
Syntax
string.replace(RegExPattern, "New_Text")Hello john, how are you john, You can modify the text
Click on above button to replace all 'john' with 'riya'
function fun() {
var text=document.getElementById("text2").textContent;
var result=document.getElementById("result1");
result.textContent="Your new text : "+text.replace(/john/g,"riya");
}<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<script>
function fun() {
var text=document.getElementById("text2").textContent;
var result=document.getElementById("result1");
result.textContent="Your new text : "+text.replace(/john/g,"riya");
}
</script>
</head>
<body>
<p id="text2" contenteditable>Hello john,how are you john, You can modify the text</p>
<button onclick="fun()">replace(/john/g,"riya")</button>
<p id="result1">Click on above button to replace all 'john' with 'riya'</p>
</body>
</html>match( )
It's used to find all matched string or sub-string within your text content
- It returns an array of matched text if found else null
- You can access single elements via its index number, starts from 0
Syntax
string.match(RegExPattern)/*Syntax - To access single elements*/
string.match(RegExPattern)[index]Hello john, how are you JOHN, You can modify the text
Click on above button to match all 'john' capital or small
function fun() {
var text=document.getElementById("text3").textContent;
var result=document.getElementById("result1");
result.textContent="Your matched text : "+text.match(/john/ig);
}<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<script>
function fun() {
var text=document.getElementById("text3").textContent;
var result=document.getElementById("result1");
result.textContent="Your matched text : "+text.match(/john/ig);
}
</script>
</head>
<body>
<p id="text3" contenteditable>Hello john,how are you JOHN, You can modify the text</p>
<button onclick="fun()">match(/john/ig)</button>
<p id="result1">Click on above button to match all 'john' capital or small </p>
</body>
</html>split( )
It's used to split any string into an array of sub-string separated by matched regular expression
Syntax
string.split(RegExPattern)
/* To access single elements */
string.split(RegExPattern)[index]/*Syntax - To limit the result*/
string.split(RegExPattern, limit)
/* To access single elements */
string.split(RegExPattern, limit)[index]- limit : Must be a positive(+ve) number
Hello my friend you can modify the text
Click on above button to split the text separating by single space
function fun() {
var text=document.getElementById("text4").textContent;
var result=document.getElementById("result1");
result.textContent="Your splited array : "+text.split(/ /);
}<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<script>
function fun() {
var text=document.getElementById("text4").textContent;
var result=document.getElementById("result1");
result.textContent="Your splited array : "+text.split(/ /);
}
</script>
</head>
<body>
<p id="text4" contenteditable>Hello my friend you can modify the text</p>
<button onclick="fun()">split(/ /)</button>
<p id="result1">Click on above button to split the text separating by single space </p>
</body>
</html>
So,