The match() method will return the resulting match of the string value from the regular expression pattern. Depending on if the g flag is used, which is the global flag the results will be returned without the g flag as the first pattern match result including the index value and the string, or with the g flag used will be an array of the found matches. If no matches are found the result being returned is null, so you cannot use the array length of 0 since the value is a null if not found. To check the differences between using and not using the g flag try the code below in your browser. The matchAll() method returns the results as an iterator from the matched pattern results of the regex. The results are returned as an array object, which includes the value being matched, the index of where the pattern starts within the string and the string as an input. MatchAll() provides the best result which includes information about where the pattern is found within the string. When using matchAll() you must include a global flag within the RegExp argument or there will be an error thrown.
Regex with Match and MatchAll string checker application.
This application will include a textarea that has an input value that will check for a pattern within the string input. The pattern will look for the word ‘love’ and return back the results from the pattern match including where the word is located using its starting index value, within the string.
1 – Set up some HTML code linking to a JS file. The HTML should include a textarea, a button and an output element for the feedback from the text to the user.
<div class=”output”>
<textarea name=”txtarea”></textarea> <br>
<button>Checker</button>
<div class=”results”></div>
</div>
2 – Select the page elements from the HTML as JavaScript objects.
const txtArea = document.querySelector(‘textarea’);
const btn = document.querySelector(‘button’);
const res = document.querySelector(‘.results’);
3 – Create some default text and place it into the textarea.
const str1 = ‘Hello World. I love JavaScript!’;
txtArea.value = str1;
4 – Create a regular expression with a global argument.
const rexg = /love/g;
5 – Add an event listener to the button click, get the current text in the textarea and check for a pattern match using matchAll()
btn.addEventListener(‘click’,()=>{
const txt = txtArea.value;
const finder = […txt.matchAll(rexg)];
console.log(finder);
6 – For matchAll you can use either the null or check if the array has a length, if it does then iterate through the results and output them to the user. Add the results to the output area as HTML code.
let html = ”;
if(finder!=null) {
finder.forEach((r,i)=>{
html += `<div>Found ${r[0]} at index value ${r.index}</div>`;
})
}else{
html = ‘Not found in the string’;
}
res.innerHTML = html;
})
Final project source code below:
const txtArea = document.querySelector(‘textarea’);
const btn = document.querySelector(‘button’);
const res = document.querySelector(‘.results’);
const str1 = ‘Hello World. I love JavaScript!’;
txtArea.value = str1;
const rexg = /love/g;
btn.addEventListener(‘click’,()=>{
const txt = txtArea.value;
const finder = […txt.matchAll(rexg)];
let html = ”;
if(finder!=null) {
finder.forEach((r,i)=>{
html += `<div>Found ${r[0]} at index value ${r.index}</div>`;
})
}else{
html = ‘Not found in the string’;
}
res.innerHTML = html;
})