正则表达式HTML版工具

最新推荐文章于 2023-02-08 22:46:44 发布

truelove1030

最新推荐文章于 2023-02-08 22:46:44 发布

阅读量760

点赞数

文章标签：正则工具

<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>

新建文本文档，把上面代码拷贝进去，然后更改后缀名为.html（此工具引用了www.forta.com）

truelove1030

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则表达式HTML版工具

Regular Expression Test Page 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:#C
复制链接

扫一扫