RegExp Flags

Next ❯Character Sets

It provides additional functionality to advance the match task using pattern

  • You can use single or multiple flag(s) according to your need
  • turned_in_notFlags
    • g : global match
    • i : ignore case
    • m : multiline match
    • u : unicode match
    • y : sticky match
  • Alert! Flags are case-sensitive. So, you must use lowercases

Hope you remember the syntax of RegExp declaration

/pattern/flags
OR
new RegExp("pattern", "flags")


g

It's used for global match, when this flag is enabled, It finds all the matched results as per your pattern

  • If you are not using this flag then it will result only the first match according to your mentioned pattern

Hello john, how are you john, You can modify the text

Click on above button to find the match with & without flag 'g'

function fun() {
 var text=document.getElementById("text1").textContent;
 var result=document.getElementById("result1");
 result.innerHTML="match(/john/) : "+text.match(/john/)+
                  "<br>match(/john/g) : "+text.match(/john/g);
}
gsubject
gclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<script>
  function fun() {
    var text=document.getElementById("text1").textContent;
    var result=document.getElementById("result1");
    result.innerHTML="match(/john/) : "+text.match(/john/)+
                  "<br>match(/john/g) : "+text.match(/john/g);
  }
</script>
</head>
<body>
<div>
  <p id="text1" contenteditable>Hello john,how are you john, You can modify the text</p>
  <button onclick="fun()">Match Result</button>
  <p id="result1">Click on above button to find the match with & without flag 'g'</p>
</div>
</body>
</html>


i

It's used to ignore case, when this flag is enabled, It will include both uppercase & lowercase match results

Hello john, how are you john, JOHn can modify the text

Click on above button to find the match with & without flag 'i'

function fun() {
  var text=document.getElementById("text2").textContent;
  var result=document.getElementById("result1");
  result.innerHTML="match(/john/g) : "+text.match(/john/g) +
                  "<br>match(/john/ig) : "+text.match(/john/ig);
}
isubject
iclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<script>
  function fun() {
    var text=document.getElementById("text2").textContent;
    var result=document.getElementById("result1");
    result.innerHTML="match(/john/g) : "+text.match(/john/g) +
                  "<br>match(/john/ig) : "+text.match(/john/ig);
  }
</script>
</head>
<body>
<div>
  <p id="text2" contenteditable>Hello john,how are you john, JOHn can modify the text</p>
  <button onclick="fun()">Match Result</button>
  <p id="result1">Click on above button to find the match with & without flag 'i'</p>
</div>
</body>
</html>


m

It's used for multiline match, when this flag is enabled, beginning (^) and end ($) characters will match the start and end of each line instead of whole string

  • x$ : means to find all matches which ends with 'x'
    ^x : means to find all matches which starts with 'x'
  • Remember!
    If flag 'm' enabled, it checks line by line ( with 'g' flag it check every line )
    You can use '\n' or '\r' to provide line by line string when providing direct values

Click on above button to find the match with & without flag 'm'

function fun() {
  var text=document.getElementById("text3").value;
  var result=document.getElementById("result1");
  result.innerHTML="match(/text$/ig) : "+ text.match(/text$/ig)+
                  "<br>match(/text$/img) : "+ text.match(/text$/img);
}
msubject
mclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<script>
  function fun() {
    var text=document.getElementById("text3").value;
    var result=document.getElementById("result1");
    result.innerHTML="match(/text$/ig) : "+ text.match(/text$/ig)+
              "<br>match(/text$/img) : "+ text.match(/text$/img);
  }
</script>
<style>
  textarea{text - align:center;width:60%;height:80px;}
</style>
</head>
<body>
<div>
  <textarea id="text3">This is line 1 text
                          This is line 2 tExT
  This is line 3 TEXT
  </textarea><br>
  <button onclick="fun()">Match Result</button>
  <p id="result1">Click on above button to find the match with & without flag 'm'</p>
</div>
</body>
</html>


u

It's used for unicode match, introduced to handle extended unicode values in the form \u{hhhh} or \u{hhhhh}

  • The hexadecimal value of '0079' is 'y', for more just type any value below
  • The hexadecimal value can only contain '0' to '9', 'a' to 'f' values (case-insensitive)
:y

Hello my friends you can modify this text

Click on above button to find the match with & without flag 'u'

function fun() {
 var text=document.getElementById("text4").textContent;
  var result=document.getElementById("result1");
  result.innerHTML="match(/\u{0079}/g) : "+ text.match(/y/g)+
              "<br>match(/\u{0079}/ug) : "+ text.match(/y/ug);
}
usubject
uclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<script>
  function fun() {
    var text=document.getElementById("text4").textContent;
    var result=document.getElementById("result1");
    result.innerHTML="match(/\u{0079}/g) : "+ text.match(/y/g)+
              "<br>match(/\u{0079}/ug) : "+ text.match(/y/ug);
  }
</script>
</head>
<body>
<div>
  <p id="text4" contenteditable>Hello my friends you can modify this text</p>
  <button onclick="fun()">Match Result</button>
  <p id="result1">Click on above button to find the match with & without flag 'u' </p>
</div>
</body>
</html>


y

It's sticky & matches only from the index provided by the 'lastIndex' RegExp property

  • It's like checking for the pattern at the told position (via 'lastIndex')
  • It will show 'null' if not finds the specified pattern just from the specified INDEX
  • Remember! Index of string starts from 0

In below example : change the position of 'you' & try the match result

Hai, you can modify this text

Click on above button to find specified pattern match just from index 5

function fun() {
  var text=document.getElementById("text5").textContent;
  var result=document.getElementById("result1");
  var patt=/you/y;
  patt.lastIndex=5;
  result.innerHTML="match(/you/y) : "+ text.match(patt);
}
ysubject
yclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<script>
  function fun() {
    var text=document.getElementById("text5").textContent;
    var result=document.getElementById("result1");
    var patt=/you/y;
    patt.lastIndex=5;
    result.innerHTML="match(/you/y) : "+ text.match(patt);
  }
</script>
</head>
<body>
<div>
  <p id="text5" contenteditable>Hai, you can modify this text</p>
  <button onclick="fun()">Match Result</button>
  <p id="result1">Click on above button to find specified pattern match just from index 5</p>
</div>
</body>
</html>

  • Character Sets
❮ Prev String Methods
Next ❯Character Sets
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯