Regex Tester
Regular expressions, also known as regex or regexp, are a powerful tool for matching patterns in strings. They can be used to validate input, search through text, and even perform complex string manipulations. In this article, we will walk through the process of creating a simple regular expression tester using HTML, JavaScript, and CSS.
HTML
The first step in creating our regular expression tester is to set up the HTML structure. We will use a simple form with two input fields, one for the regular expression and one for the test string, and a button to run the test. Here is the basic HTML structure:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form> <label for="regex">Regular Expression:</label> <input type="text" id="regex" name="regex"> <br> <label for="teststring">Test String:</label> <input type="text" id="teststring" name="teststring"> <br> <button type="button" onclick="testRegex()">Test</button> <button type="button" onclick="clearInputs()">Clear</button> <br> <p id="result"></p> </form> |
In this HTML, we have two input fields for the regular expression and the test string, and two buttons for running the test and clearing the inputs fields. We also have a p element with an id of result that will be used to display the results of the test.
JavaScript
The next step is to add the JavaScript code that will handle the test logic. We will use the RegExp object to create a regular expression from the input field, and the test() method to check if the regular expression matches the test string. Here is the basic JavaScript code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function testRegex() { var regex = new RegExp(document.getElementById("regex").value); var testString = document.getElementById("teststring").value; var match = testString.match(regex); var result = ""; if (match) { result = "The regular expression matches the test string.<br>" match.forEach(function(match, index){ if(index === 0) return; result += "Group "+ index + ": " + match + "<br>" }); } else { result = "The regular expression does not match the test string."; } document.getElementById("result").innerHTML = result; } |
This JavaScript will use the match() method to match the regular expression against the test string and obtain an array with the matched groups, if any. It will then iterate over the array and append the matched groups to the result.
Also, I’ve added a function to clear the inputs fields:
|
1 2 3 4 5 |
function clearInputs() { document.getElementById("regex").value = ""; document.getElementById("teststring").value = ""; document.getElementById("result").innerHTML = ""; } |
This function will clear the value of the inputs fields and the result element.
CSS
The final step is to add some styling to the regular expression tester using CSS. We will use a simple CSS rule to give the form a little padding and a border. Here is the basic CSS code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
form { padding: 20px; border: 1px solid #ccc; } label { font-weight: bold; margin-right: 10px; } #result { margin-top: 10px; } |
In this CSS, I’ve added a padding to the form element, to give it some space from the edges of the container. I also added a border, to give it a simple visual separation from the rest of the page. Also, I’ve added a margin-top to the result element, this will give some space between the buttons and the matches groups.
Conclusion
In this article, we’ve walked through the process of creating a simple regular expression tester using HTML, JavaScript, and CSS. This basic tester can be used to validate input, search through text, or perform other string manipulations. You can also add additional functionality, such as the ability to perform multiple tests or show the matched groups. Regular expressions can be a powerful tool in any developer’s toolbox, and this regular expression tester is a great way to start learning and experimenting with them.
Demo
References
- Regular-Expressions.info: https://www.regular-expressions.info/
- Mozilla Developer Network (MDN) – Regular Expressions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
- Regex101: https://regex101.com/
- Regular-Expressions.co.uk: https://www.regular-expressions.co.uk/
- RegExr: https://regexr.com/