I wrote a regex tester in JS. However, it appears that for some regexes, I get multiple matches.
For example, if for the content hello, world
, the regex hello.*
is given, the it is reported to match hello, world
. However, if the regex is now set to (hello|goodbye).*
then the reported matches are hello, world
and hello
, whereas it should be hello, world
only.
<!DOCTYPE html>
<html>
<head>
<title>Regex tester</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function resetform() {
document.getElementById("results").innerHTML = "";
}
function escapetags(str) {
return (str.replace('&','&').replace('<', '<').replace('>', '>'));
}
function check() {
if (!document.form1.re.value) {
document.getElementById("results").innerHTML = '<p style="color:red"><b>Error: No regular expression specified</b></p>';
return;
}
if (!document.form1.str.value) {
document.getElementById("results").innerHTML = '<p style="color:red"><b>Error: No content specified</b></p>';
return;
}
var pattern,
modifiers = "";
if (document.form1.nocase.checked) {
modifiers = "i";
}
if (document.form1.global.checked) {
modifiers = modifiers + "g";
}
try {
if (modifiers) {
pattern = new RegExp(document.form1.re.value, modifiers);
} else {
pattern = new RegExp(document.form1.re.value);
}
} catch (excpt) {
document.getElementById("results").innerHTML = '<p style="color:red"><b>Error: Invalid regular expression</b></p>';
return;
}
var matches = pattern.exec(document.form1.str.value);
if (matches == null) {
document.getElementById("results").innerHTML = '<p><b>Regular expression did not match with content<b></p>';
} else {
document.getElementById("results").innerHTML = '<p><b>Regular expression matched with content</b></p><p>Matches:</p>';
for (var index = 0; index < matches.length; index++) {
document.getElementById("results").innerHTML += escapetags(matches[index]) + '<br>';
}
}
}
</script>
<h1>Regex tester</h1>
<form name="form1">
<p>Regex:</p>
<input type="text" name="re" size="65"><br>
<input type="checkbox" name="nocase">Case insensitive
<input type="checkbox" name="global">Global
<p>Content:</p>
<textarea name="str" rows="8" cols="65"></textarea><br><br>
<input type="button" value="Check" onclick="check();">
<input type="button" value="Reset" onclick="reset();resetform();">
</form>
<div id="results"></div>
</body>
</html>
Can anyone help me find the problem in my code?
Thanks in advance.