注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

js正则表达式学习界面  

2014-03-26 17:04:51|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图:
js正则表达式学习界面 - 湖小叶叶 - 米欧光影工作室
 
作用:
练习正则表达式。

源代码:

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mio正则表达式学习</title>
<style>
body{font-size:12px;}
input.long{width:760px;}
#divShow{width:800px; overflow-y:scroll;overflow-x:hidden;
background:#0096ff;color:#fff; padding:10px;}
textarea{width:800px; height:200px;}
</style>
</head>
<body>
<h1><a href='http://www.javascriptkit.com/javatutors/redev2.shtml' target='_new'>RegExp</a> Section</h1>
<hr />
RegExp:<input type=input id=reg class='long' value='(http(s)\:\/\/)?(www\.)?(\w+\:\d+)?\.(com|html|htm|php)'/><br />
String:<br /><textarea id=str></textarea><br />

<input type=button id=btn1 value=summit />
<input type=button id=btn2 value=clear /><br />

<div id='divShow'></div>
<script>
/*
颜色拾取器 http://js.alixixi.com/a/2012073082544.shtml
http://www.jb51.net/article/42299.htm
http://www.jb51.net/article/21484.htm
http://www.w3schools.com/js/DEFAULT.asp

match和exec的区别:http://www.cnblogs.com/xiehuiqi220/archive/2008/11/05/1327487.html
权威指南:http://www.cnblogs.com/zhaoran/archive/2013/01/10/2854852.html
*/

function $(s){return document.getElementById(s);}

window.onload=function(){
var oReg=$('reg'), oStr=$('str'),
oBtn1=$('btn1'), oBtn2=$('btn2'),
oShow=$('divShow');

oStr.value='<p id="nv"><a href="http://news.baidu.com" name="tj_news">新&nbsp;闻</a> <b>网&nbsp;页</b> <a href="http://tieba.baidu.com" name="tj_tieba">贴&nbsp;吧</a> <a href="http://zhidao.baidu.com" name="tj_zhidao">知&nbsp;道</a> <a href="http://music.baidu.com" name="tj_mp3">音&nbsp;乐</a> <a href="http://image.baidu.com" name="tj_img">图&nbsp;片</a> <a href="http://v.baidu.com" name="tj_video">视&nbsp;频</a> <a href="http://map.baidu.com" name="tj_map">地&nbsp;图</a></p>';

function w(s,o){
var o = o || oShow;
o.innerHTML += s;
}

oBtn1.onclick=function(){
var r=RegExp(oReg.value, 'gi');
var s=oStr.value;

var result;
while( result = r.exec(s) ){
w(r +'.exec(' +s +')=' + ': (' + r.lastIndex + ') : ' + result +'<hr />' );
Rr(result);
}


function Rr(result){
if(result){
for(var i=0; i<result.length; i++){
w(i+': ('+r.lastIndex+') : '+ result[i]+'<br />');}
}
}
}

oBtn2.onclick=function(){
oShow.innerHTML='';
}

}
/*
G
*/
</script>
</body>
</html>



----



  评论这张
 
阅读(66)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017