js深入了解——正则表达式测试工具demo

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>正则表达式测试工具</title><style>#regexp{width:650px;/*注意不要设置该父盒子高度，高度由内容自己撑起来*/margin:100px auto;font-size:14px;}#regexp .title{color:#777;font-size:24px;text-align:center;}#regexp .textbox{height:150px;/*宽度先不进行设置，因为还要设置文本框的内外边距，用650-边框和缩进即可*/width: 638px;border:1px solid #ccc;//设置圆角border-radius:5px;padding:5px;resize:none;//如果不设置的话，文本框的大小是可以拖动的}#regexp .textfield{width:215px;padding:5px;border:1px #ccc solid;}</style>
</head>
<body><div id="regexp"><!--此处快捷的方法是hl.title{正则表达式测试工具}，注意这里面的文字是不用加引号的--><!--表头--><h1 class="title">正则表达式测试工具</h1><!--用户输入的文本，此处的行和列是用来表示其长度和宽度，可删掉用css来设置--><!--由于用户输入框和输出框有很多样式是相同的，因此可以设置一个class值，可直接复用--><textarea  id="userText"  class="textbox" placeholder="在此输入待匹配的文本"></textarea><p>正则表达式：<!--用户输入的表达式，此处给一个id，方便之后js获取--><input type="text" id = "userRegExp" class = "textfield" placeholder = "在此输入正则表达式"><!--后面接着跟着的是三个复选框,复选框的name值得相同，注意复选框是如何不设置id而来设置js的--><input type = "checkbox" name= "userModifier" value = "i" >忽略大小写<input type = "checkbox" name= "userModifier" value = "g" >全局匹配<input type = "checkbox" name= "userModifier" value = "m" >多行匹配<!--为了方便其设置需要给其一个id--><input type="button" value="测试匹配" id = "matchingBtn"></p><!--此处是禁止的文本框，显示结果的，需要用到disablede--><textarea  id = "matchingResult" class = "textbox" disabled = "disabled"></textarea></div><script>var  userText = document.getElementById('userText'),userRegExp = document.getElementById('userRegExp'),userModifier = document.getElementsByName('userModifier'),matchingBtn = document.getElementById('matchingBtn'),matchingResult = document.getElementById('matchingResult');var pattern,//modifier是保存igm的值modifier = '';//那么如何改变复选框的值来改变modifier的值呢；循环来啦//此处注意复选框有数组的性质//userModifier.length节点列表的长度；//外层是为了依次判断并清空值，而内层才是为了得到值for(var i = 0;i < userModifier.length;i++){//每一次单击了复选按钮的值时候，就需要清空值，重新进行判断userModifier[i].onclick = function(){modifier = '';for(var j = 0;j < userModifier.length;j++){//注意看选中是如何赋值的if(userModifier[j].checked){modifier += userModifier[j].value;};}}}//所有的一切发生在点击 测试匹配按钮 之后；为该按钮绑定事件matchingBtn.onclick = function(){//value值的是输入的值pattern = new RegExp(userRegExp.value,modifier);//||短路操作符，如果前面一个为真，返回前面的值，否则返回后面的值matchingResult.value = pattern.exec(userText.value) || '(没有匹配)';}</script>
</body>
</html>

js深入了解——正则表达式测试工具demo相关推荐

正则表达式测试工具、网页版
有时候为了测试正则表达式.临时自己写了这么一个.我对于JS也不懂.所以写的很差.. 代码:(我测试在IE8中是正常的.然而在我的FireFox中的.却无法使用.原因不明.这个我也不管了.反正就自己用用 ...
正则表达式测试工具 Regex Tester 的使用方法
2019独角兽企业重金招聘Python工程师标准>>> 正则表达式测试工具"RegexTester",下载地址:http://www.oschina.net/p/ ...
【正则表达式测试工具】使用正则表达式快速找出两列数据中不同的行
例如像下面的这样的一堆海量数据(已省略部分),可能有几千组,在不编程的情况下如何快速找到不同的行?可能excel有办法,但是处理起来应该没我这样方便的. b_start b_end 100790 10 ...
正则表达式测试工具模仿
学习进入下个阶段,对在线正则表达式测试工具进行仿写. 原版链接如下:正则表达式 – 开源中国测试工具一.HTML表单格式及CSS样式详细略关键点1 HTML结构及ID.class.value名称 ...
用JavaScript写一个正则表达式测试工具
用JavaScript写一个正则表达式测试工具 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
BoooLee pyretoolkit -- 一个基于python re模块的在线正则表达式测试工具
为了学习python re模块正则表达式,寻找了一些正则表达式工具,除了komodo捆绑的rx toolkit外,其他的测试工具都是基于.net或其他引擎的,语法上多少有点出入. 干错自己写一个,用了 ...
绿色版的正则表达式测试工具及正则表达式入门教程
下载网址:https://download.csdn.net/download/xyz846/10856604 RegexTester是一款正则表达式测试器,支持单行模式.多行模式,经典的窗口设计,该 ...
logstash grok正则表达式测试工具GrokConstructor
表达式测试工具 GrokConstructor 下载地址: 链接:https://pan.baidu.com/s/1sxd7H0Zum79xWWjE8s_opw 提取码:aaek 正则表达式库: ht ...
PyCharm使用技巧：Regex Tester（正则表达式测试工具）
Regex Tester是PyCharm的第三方插件,可以测试正则表达式. 安装Regex Tester:Setting->Plugins->Browser Repositories-&g ...

js深入了解——正则表达式测试工具demo

js深入了解——正则表达式测试工具demo相关推荐

最新文章

热门文章