JavaScript/RegExTester_JavaScript/index.html at master · waynexw/JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<HTML>
<HEAD>
<TITLE>Regular Expression Test Page</TITLE>

<!--- Some styles to make the page look nice --->
<STYLE>
  BODY {font-family:arial;font-size:12px}
  INPUT {font-size:11px}
  TEXTAREA {font-size:11px}
  TH {background:#8888FF;color:white;text-align:left}
  TD {background:#CCCC99;color:black;font-size:12px}
  TD.RowA {background:#CCCC99}
  TD.RowB {background:#EEEEBB}
  .header {font-weight:bold}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
// Turn off fields used only by replace
function hideReplaceFields() {
  document.getElementById('RegExReplace').disabled=true;
  document.getElementById('replaceheader').disabled=true;
}

// Turn on fields used only by replace
function showReplaceFields() {
  document.getElementById('RegExReplace').disabled=false;
  document.getElementById('replaceheader').disabled=false;
}

// Perform a find
function processRegexFind(text, regex, flags) {
	var reg = new RegExp(regex, flags);
	var lastIdx = -1;
	var iCount = 0;
	var result = "";
	var output = '<DIV STYLE="height:200px;overflow-y:auto;width:550">' +
				 '<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="550">' +
				 '<TR><TH WIDTH="*">Match</TH><TH WIDTH="50">Position</TH><TH WIDTH="50">Length</TH></TR>';

	// Loop as long as have matches
	while (lastIdx != 0)
	{
		// Do it
		var mtch = reg.exec(text);

		// Check if got one
		if (reg.lastIndex != 0)
		{
			// Yep, increment counter
			iCount++;

			if (iCount % 2)
				style = "RowA";
			else
				style = "RowB";
			// Write output
			output += '<TR CLASS="' + style + '"><TD>' +
						RegExp.lastMatch + "</TD><TD>" +
						(reg.lastIndex-RegExp.lastMatch.length) + "</TD><TD>" +
						RegExp.lastMatch.length + "</TD></TR>";
		}

		lastIdx = reg.lastIndex;
	}

	output += "</TABLE>";

	// Build result
	if (iCount != 0)
		result = "Matches Found: " + iCount+ "<BR>" + output;
	else
		result = "No matches";

	return result;
}

// Process a replace
function processRegexReplace(text, regexfind, regexreplace, flags) {
	// Define regex
	var re = new RegExp (regexfind, flags) ;
	// Do it
	var newstr = text.replace(re, regexreplace) ;
	// Generate output
	var result = '<DIV STYLE="height:200px;overflow-y:auto;width:550">' +
				 '<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="550">' +
				 '<TR><TH>New Text</TH></TR><TR><TD>' +
				 newstr + '</TD></TR>';

return result;
}

// Process entry point
function processRegex(form) {
	var output="";
	var flags;
	if (form.CaseSensitive.checked)
		flags = "g";
	else
		flags = "gi";

	// What to do?
	if (form.OperationFind.checked) {
		output=processRegexFind(form.SearchText.value, form.RegEx.value, flags);
	}
	else if (form.OperationReplace.checked) {
		output=processRegexReplace(form.SearchText.value, form.RegEx.value, form.RegExReplace.value, flags);
	}

	document.getElementById('output').innerHTML=output;

	return false;
}
</SCRIPT>
</HEAD>

<BODY>

<FORM NAME="tester" ACTION="" METHOD="post" onSubmit="processRegex(this);return false">

<TABLE BORDER="1" CELLPADDING="4" CELLSPACING="0" WIDTH="550">
  <TR>
    <TH CLASS="Dialog">Regular Expression Tester</TH>
  </TR>
  <TR>
    <TD CLASS="Dialog">

    <!--- Text input for the regular expression itself --->
    <SPAN CLASS="header">Enter a regular expression:</SPAN><BR>
    <INPUT NAME="RegEx" TYPE="Text" SIZE="65" STYLE="font-size:13px">

    <!--- Checkbox to control case-sensitivity --->
    <INPUT TYPE="Checkbox" NAME="CaseSensitive" ID="CaseSensitive" VALUE="Yes">
    <LABEL FOR="CaseSensitive">Case sensitive</LABEL>
    <BR>

    <!--- Radio buttons to display find vs. replace --->
    <INPUT TYPE="Radio" NAME="Operation" ID="OperationFind" VALUE="find" CHECKED onClick="hideReplaceFields()">
    <LABEL FOR="OperationFind">Find</LABEL>
    <INPUT TYPE="Radio" NAME="Operation" ID="OperationReplace" VALUE="replace" onClick="showReplaceFields()">
    <LABEL FOR="OperationReplace">Replace</LABEL>
    <BR>

    <!--- Text input for the replace regular expression --->
    <SPAN CLASS="header" ID="replaceheader">Enter the replace regular expression:</SPAN><BR>
    <INPUT ID="RegExReplace" NAME="RegExReplace" TYPE="Text" SIZE="65" STYLE="font-size:13px">
    <BR><BR>

    <!--- Textarea where user can type the text to search --->
    <SPAN CLASS="header">And the text you wish to search:</SPAN><BR>
    <TEXTAREA NAME="SearchText" WRAP="off" COLS="70" ROWS="6"></TEXTAREA>
    <BR>

    <!--- Submit button to start the search --->
    <INPUT NAME="Submit" TYPE="Submit" STYLE="font-weight:bold" VALUE="Match Now"></TD>
  </TR>
</TABLE>

</FORM>

<!-- Display any reults here --->
<SPAN id="output"></SPAN>

<!-- Default to find --->
<SCRIPT LANGUAGE="JavaScript">
hideReplaceFields();
</SCRIPT>

</BODY>
</HTML>