正则表达式,浅谈React中的元素

HTML 各种标签及简单应用:

正则表达式 收集
只能输入数字:”^[0-9]*$”。
只能输入n位的数字:”^\d{n}$”。
只能输入至少n位的数字:”^\d{n,}$”。
只能输入m~n位的数字:。”^\d{m,n}$”
只能输入零和非零开头的数字:”^(0|[1-9][0-9]*)$”。
只能输入有两位小数的正实数:”^[0-9]+(.[0-9]{2})?$”。
只能输入有1~3位小数的正实数:”^[0-9]+(.[0-9]{1,3})?$”。
只能输入非零的正整数:”^\+?[1-9][0-9]*$”。
只能输入非零的负整数:”^\-[1-9][]0-9″*$。
只能输入长度为3的字符:”^.{3}$”。
只能输入由26个英文字母组成的字符串:”^[A-Za-z]+$”。
只能输入由26个大写英文字母组成的字符串:”^[A-Z]+$”。
只能输入由26个小写英文字母组成的字符串:”^[a-z]+$”。
只能输入由数字和26个英文字母组成的字符串:”^[A-Za-z0-9]+$”。
只能输入由数字、26个英文字母或者下划线组成的字符串:”^\w+$”。
验证用户密码:”^[a-zA-Z]\w{5,17}$”正确格式为:以字母开头,长度在6~18之间,只能包含字符、数字和下划线。
验证是否含有^%&’,;=?$\”等字符:”[^%&’,;=?$\x22]+”。
只能输入汉字:”^[\u4e00-\u9fa5]{0,}$”
验证Email地址:”^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$”。
验证InternetURL:”^
验证电话号码:”^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$”正确格式为:”XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX”。
验证身份证号(15位或18位数字):”^\d{15}|\d{18}$”。
验证一年的12个月:”^(0?[1-9]|1[0-2])$”正确格式为:”01″~”09″和”1″~”12″。
验证一个月的31天:”^((0?[1-9])|((1|2)[0-9])|30|31)$”正确格式为;”01″~”09″和”1″~”31″。
利用正则表达式限制网页表单里的文本框输入内容:

React
深入系列,深入讲解了React中的重点概念、特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React。

http://www.w3school.com.cn

 1 <p><p>   2 <br/>   3 <hr/>横线    4 <pre><pre>   保留了标签内的空格和换行   5 <code>Computer code</code>   6 <br />   7 <kbd>Keyboard input</kbd>   8 <br />   9 <tt>Teletype text</tt>  10 <br />  11 <samp>Sample text</samp>  12 <br />  13 <var>Computer variable</var>  14 <br />  15 地址<address></address>  16 显示缩略词<abbr title="etcetera">etc.</abbr>  17 <acronym title="World Wide Web">WWW</acronym>  18     19 <del></del>删除    20 <ins></ins>插入    21 <b></b> 加粗    22  <strong></strong >加重语气   23 <i></i>斜体    24 <small></small>小字体    25 <q></q>加引号  26 <blockquote></blockquote>长引用   27  <a   targer="_blank"></a>  链接在新的窗口打开   28   <a  cnblogs_code">   1 &nbsp;空格    2 <h></h>标题    3 <tr><td></td><td></td></tr>     4 <table cellpadding="10"></table> 内边距     5  <table cellspacing="10"></table> 外边距   6 bgcolor="red"  background=""     7  <table  frame="box“></table> above below  hsides(上和下)   vsides  (左和右)    8  <ul><li></li></ul>无序列表 左边有黑原点   9 <ol start="50"><li><li></ol>左边有序号从50开始     10 <dl><dt></dt><dd></dd><dd><dd></dl>  11 <form>  12 <input type="text" name="dd"/>  13 <input type="checkbox" name="cc" value="male"/>  14 <input type="checkbox" name="cc" value="female"/>  15 <select name="bb">  16 <option value="volvo">volvo</option>  17 <option value="f">f</option>  18 </select>  19 <textarea rows="10" cols="30">  20 ddddd  21 </textarea >  22 <fieldset>  23 <legend>ddd</legend>  24 </fieldset> 使表单周围有框  25 <input type="reset" value="重置"/>重置  26 </form>  27 <frameset cols="25%,50%,25%">  28     <frame src="dd.html">  29     <frame src="dd.html">  30     <frame src="dd.html">  31 </frameset>实现在一个页面内垂直展示三个页面内容—------网页  32 <frameset rows="25%,50%,25%">  33     <frame src="dd.html">  34     <frame src="dd.html">  35     <frame src="dd.html">    html5不支持了  36 </frameset>实现在一个页面内水平展示三个页面内容  37 <iframe src=""></iframe>内嵌的  38 <noscript></noscript>里面的显示不支持Js的文本  39 <video controls="controls">  40     <source src="movie.ogg" type="video/ogg">  41     <source src="movie.mp4" type="video/mp4">  42 </video>  43   44   45  

用正则表达式限制只能输入中文:onkeyup=”value=value.replace(/[^\u4E00-\u9FA5]/g,”)”
onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\u4E00-\u9FA5]/g,”))”

React
中的元素、组件、实例和节点,是React中关系密切的4个概念,也是很容易让React
初学者迷惑的4个概念。现在,老干部就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字、刨根问底的同学(老干部就是其中一员)的好奇心。

 

用正则表达式限制只能输入全角字符:
onkeyup=”value=value.replace(/[^\uFF00-\uFFFF]/g,”)”
onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\uFF00-\uFFFF]/g,”))”

元素 (Element)

 1 <style type="text/css">   2 #div1, #div2   3 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}   4 </style>   5 <script type="text/javascript">   6 function allowDrop(ev)   7 {   8 ev.preventDefault();   9 }  10   11 function drag(ev)  12 {  13 ev.dataTransfer.setData("Text",ev.target.id);  14 }  15   16 function drop(ev)  17 {  18    19 var data=ev.dataTransfer.getData("Text");  20 ev.target.appendChild(document.getElementById(data));  21 }  22 </script>  23 </head>  24 <body>  25   26 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">  27   <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />  28 </div>  29 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  30 移动图片到另一个盒子里  ---拖放  (event 是固定的变量)  31   32 <script  type=”text/javascript”>  33 Function d(e)  34 {  35     X=e.clientX;  36     Y=e.clientY;  37     Document.getElementById(“cc”).innerHTML=”ddd:(“+x+”,”+y+”)”;  38 }  39 Function c()  40 {  41     Document.getElementById(“cc”).innerHTML=””;  42 }  43 </script>  44 <div id=”dd” onmousemove=”d(event)” onmousemove=”c”></div>  45 <div id=”cc” ></div>  46 显示坐标  47   48 画画  49 <canvas id=”cc”>  50   51 </canvas>  52 <script type=”text/javascript”>  53  Var cl=document.getElementId(“cc”);  54  Var dddd=cl.getContent(“2d”);  55 dddd.moveTo(10,10);  56 dddd.lineTo(150,50);  57 dddd.lineTo(10,50);  58 dddd.stroke();  59       60 </script>  61   62 绘制圆、渐变、把一幅图像放置到画布上  63 内联 SVG

用正则表达式限制只能输入数字:onkeyup=”value=value.replace(/[^\d]/g,”)
“onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,”))”

React 元素其实就是一个简单JavaScript对象,一个React
元素和界面上的一部分DOM对应,描述了这部分DOM的结构及渲染效果。一般我们通过JSX语法创建React
元素,例如:

新元素HTML5<input>等标签及事件

用正则表达式限制只能输入数字和英文:onkeyup=”value=value.replace(/[\W]/g,”)
“onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,”))”

const element = <h1 className='greeting'>Hello, world</h1>;
  1 •    email    2 •    url    3 •    number    4 •    range    5 •    Date pickers (date, month, week, time, datetime, datetime-local)    6 •    search    7 •    color    8 <input type="number" name="points" min="0" max="10" step="3" value="6" />    9 <input type="range" name="points" min="1" max="10" />   10 •    date - 选取日、月、年   11 •    month - 选取月、年   12 •    week - 选取周和年   13 •    time - 选取时间(小时和分钟)   14 •    datetime - 选取时间、日、月、年(UTC 时间)   15 •    datetime-local - 选取时间、日、月、年(本地时间)   16 Date: <input type="date" name="user_date" />   17    18    19 <form action="/example/html5/demo_form.asp" method="get">   20 Webpage: <input type="url" list="url_list" name="link" />   21 <datalist id="url_list">   22     <option label="W3School" value="http://www.w3school.com.cn" />   23     <option label="Google" value="http://www.google.com" />   24     <option label="Microsoft" value="http://www.microsoft.com" />   25 </datalist>   26 <input type="submit" />   27 </form>   28    29    30 keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。   31 <keygen name="security" />   32    33 <script type="text/javascript">   34 function resCalc()   35 {   36 numA=document.getElementById("num_a").value;   37 numB=document.getElementById("num_b").value;   38 document.getElementById("result").value=Number(numA)+Number(numB);   39 }   40 </script>   41 </head>   42 <body>   43 <p>使用 output 元素的简易计算器:</p>   44 <form onsubmit="return false">   45  <input id="num_a" /> +   46  <input id="num_b" /> =   47  <output id="result" onforminput="resCalc()"></output>   48 </form>   49 User name: <input type="text" name="user_name"  autofocus="autofocus" />   50 自动获得焦点   51 <form action="demo_form.asp" method="get" id="user_form">   52 First name:<input type="text" name="fname" />   53 <input type="submit" />   54 </form>   55 Last name: <input type="text" name="lname" form="user_form" />   56 form 属性规定输入域所属的一个或多个表单。   57    58    59 <form action="demo_form.asp" method="get" id="user_form">   60 E-mail: <input type="email" name="userid" /><br />   61 <input type="submit" value="Submit" />   62 <br />   63 <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />   64 <br />   65 <input type="submit" formnovalidate="true" value="Submit without validation" />   66 <br />   67 </form>   68 创建不同的提交按钮   69    70 height 和 width 属性只适用于 image 类型的 <input> 标签   71    72 <input type="file" name="img" multiple="multiple" />----选择文件   73    74 <form action="demo_form.asp" method="get" novalidate="true">让不验证   75    76 Country code: <input type="text" name="country_code"   77 pattern="[A-z]{3}" title="Three letter country code" />   插入正则表达式   78 placeholder 提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:   79    80 required="required"  (不能为空)   81     84 <canvas id="myCanvas">your browser does not support the canvas tag </canvas>   85    86 <script type="text/javascript">   87    88 var canvas=document.getElementById('myCanvas');    89 var ctx=canvas.getContext('2d');   90 ctx.fill ;   91 ctx.fillRect(0,0,80,100);   92    93 </script>   94    95  标签   96 <embed src="/i/helloworld.swf" />                  flash   97 <article></article>标记文章   98 <header><section></section></header>头   99 <nav><a></a></nav>中间放连接  100 <footer><address></address></footer>  101 <audio src="someaudio.wav">  102 您的浏览器不支持 audio 标签。  103 </audio>声音  104 <video></video>视频  105   106 事件  107 <input type=”email url  number range color “/>  108 <body onload="load()">  109 onblur  110 onfocus 当元素失去焦点  111 onchange   112 onselect  113 onsubmit     提交表单时  114 onclick  115 onbclick  双击  116    117 http://www.w3school.com.cn/tags/html_ref_canvas.asp 画布

得用正则表达式从URL地址中提取文件名的javascript程序,如下结果为page1

element是一个React 元素。在编译环节,JSX
语法会被编译成对React.createElement()的调用,从这个函数名上也可以看出,JSX语法返回的是一个React
元素。上面的例子编译后的结果为:

CSS各种属性及应用;

s=””
s=s.replace(/(.*\/){0,}([^\.]+).*/ig,”$2″)
alert(s)

const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);
 1 body {   2        3 }   4    5 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:   6 body    7   {   8   background-image:url(/i/eg_bg_02.gif);   9   background-repeat:no-repeat;  10   background-attachment:fixed  11   }  12 p {text-indent: -5em; padding-left: 5em;}首行缩进  13 justify 水平对齐  text-align   14 a {text-decoration: none;}格式下划线取消啥的  15   16 a:link {color:#FF0000;}        /* 未被访问的链接 */  17 a:visited {color:#00FF00;}    /* 已被访问的链接 */  18 a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */  19 a:active {color:#0000FF;}    /* 正在被点击的链接 */  20    21 •    Serif 字体  22 •    Sans-serif 字体  23 •    Monospace 字体  24 •    Cursive 字体  25 •    Fantasy 字体  26 border-style:dotted solid double dashed;   27 上边框是点状  28 右边框是实线  29 下边框是双线  30 左边框是虚线  31 body {font-family: sans-serif;}---字体  32   33 white-space 设置为 pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反,会像正常文本中一样合并空白符序列,但保留换行符。  34   35 ul {list-style-type : square}  36 ul li {list-style-image : url(xxx.gif)}  37 li {list-style : url(example.gif) square inside}列表样式  38 img[alt] {border: 5px solid red;} 带有 alt 属性的图像应用样式  39   40 *[lang|="en"] {color: red;}  41 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素  42     43 ul  44 {  45 list-style-type:none;  46 margin:0;  47 padding:0;  48 }  49 li  50 {  51 display:inline;           52 }                                ---块

匹配双字节字符(包括汉字在内):[^\x00-\xff]

最终,element的值是类似下面的一个简单JavaScript对象:

CSS3

应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)

const element = {
 type: 'h1',
 props: {
  className: 'greeting',
  children: 'Hello, world'
 }
}
  1 border-radius:25px;    2 -moz-border-radius:25px; /* 老的 Firefox */    3  加圆角    4     5 box-shadow: 10px 10px 5px #888888;         加阴影     11 div   12 {   13 border:15px solid transparent;   14 width:300px;   15 padding:10px 20px;   16 }   17    18 #round   19 {   20 -moz-border-image:url(/i/border.png) 30 30 round;    /* Old Firefox */   21 -webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */   22 -o-border-image:url(/i/border.png) 30 30 round;        /* Opera */   23 border-image:url(/i/border.png) 30 30 round;   24 }   25    26 #stretch   27 {   28 -moz-border-image:url(/i/border.png) 30 30 stretch;    /* Old Firefox */   29 -webkit-border-image:url(/i/border.png) 30 30 stretch;    /* Safari and Chrome */   30 -o-border-image:url(/i/border.png) 30 30 stretch;    /* Opera */   31 border-image:url(/i/border.png) 30 30 stretch;   32 }   33 </style>   34 </head>   35 <body>   36    37 <div id="round">在这里,图片铺满整个边框。</div>   38 <br>   39 <div id="stretch">在这里,图片被拉伸以填充该区域。</div>  42    43 background-size:63px 100px;   背景图片缩小   44    45 background-position:left;   46 background-origin:border-box;   47 background-origin:content-box;    背景定位   48 background-clip:content-box;   颜色背景定位   49 div.boxx   50 {   51 box-sizing:border-box;   52     53 width:50%;   54 border:1em solid red;   55 float:left;   56 }   59 text-shadow: 5px 5px 5px #FF0000; 文本阴影   60    61 允许对长单词进行拆分,并换行到下一行:   62 p {word-wrap:break-word;}   63    64 font-family:myFirstFont; 定义字体   65 font-weight:bold;    66    67 transform:rotate(9deg);   旋转     68 transform:translate(50px,100px);  移动   69 transform:scale(2,4); 横着放大2倍  竖着放大4倍   70 transform: skew(30deg,20deg);   水平旋转 垂直旋转   71    72 transform-origin:20% 80%;  定位   73     74 transition:width  10s;   75 div:hover   76 {   77 width:1000px;   78 }   渐变效果   79    80    81 .newspaper   82 {   83 -moz-column-count:3; /* Firefox */   84 -webkit-column-count:3; /* Safari and Chrome */   85 column-count:3;   86 }                                  三列   87 规定列之间 40 像素的间隔:   88 div   89 {   90 -moz-column-gap:40px;        /* Firefox */   91 -webkit-column-gap:40px;    /* Safari 和 Chrome */   92 column-gap:40px;   93 }   94 规定列之间的宽度、样式和颜色规则:   95 div   96 {   97 -moz-column-rule:3px outset #ff0000;    /* Firefox */   98 -webkit-column-rule:3px outset #ff0000;    /* Safari and Chrome */   99 column-rule:3px outset #ff0000;  100 }          101 column-span:all;  横跨所有列  102   103   104 规定 div 元素可由用户调整大小:  105 div  106 {  107 resize:both;  108 overflow:auto;  109 }  110   111 text-shadow: 5px 5px 5px #FF0000;  水平阴影、垂直阴影、模糊距离,以及阴影的颜色:  112 允许对长单词进行拆分,并换行到下一行:  113 p {word-wrap:break-word;}

String.prototype.len=function(){return
this.replace([^\x00-\xff]/g,”aa”).length;}

React
元素可以分为两类:DOM类型的元素和组件类型的元素。DOM类型的元素使用像h1、div、p等DOM节点创建React
元素,前面的例子就是一个DOM类型的元素;组件类型的元素使用React
组件创建React 元素,例如:

学习心得,可供参考;

匹配空行的正则表达式:\n[\s| ]*\r

const buttonElement = <Button color='red'>OK</Button>;

匹配HTML标记的正则表达式:/<(.*)>.*<\/\1>|<(.*)
\/>/

buttonElement就是一个组件类型的元素,它的值是:

匹配首尾空格的正则表达式:(^\s*)|(\s*$)

const buttonElement = {
 type: 'Button',
 props: {
  color: 'red',
  children: 'OK'
 }
}

String.prototype.trim = function()
{
    return this.replace(/(^\s*)|(\s*$)/g, “”);
}

对于DOM类型的元素,因为和页面的DOM节点直接对应,所以React知道如何进行渲染。但是对于组件类型的元素,如buttonElement,React是无法直接知道应该把buttonElement渲染成哪种结构的页面DOM,这时就需要组件自身提供React能够识别的DOM节点信息,具体实现方式在介绍组件时会详细介绍。

利用正则表达式分解和转换IP地址:

有了React
元素,我们应该如何使用它呢?其实,绝大多数情况下,我们都不会直接使用React
元素,React 内部会自动根据React
元素,渲染出最终的页面DOM。更确切地说,React元素描述的是React虚拟DOM的结构,React会根据虚拟DOM渲染出页面的真实DOM。

下面是利用正则表达式匹配IP地址,并将IP地址转换成对应数值的Javascript程序:

组件 (Component)

function IP2V(ip)
{
 re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g  //匹配IP地址的正则表达式
if(re.test(ip))
{
return
RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
 throw new Error(“Not a valid IP address!”)
}
}

React
组件,应该是大家最熟悉的React中的概念。React通过组件的思想,将界面拆分成一个个可以复用的模块,每一个模块就是一个React
组件。一个React
应用由若干组件组合而成,一个复杂组件也可以由若干简单组件组合而成。

不过上面的程序如果不用正则表达式,而直接用split函数来分解可能更简单,程序如下:

React组件和React元素关系密切,React组件最核心的作用是返回React元素。这里你也许会有疑问:React元素不应该是由React.createElement()
返回的吗?但React.createElement()的调用本身也是需要有“人”负责的,React组件正是这个“责任人”。React组件负责调用React.createElement(),返回React元素,供React内部将其渲染成最终的页面DOM。

var ip=”10.100.20.168″
ip=ip.split(“.”)
alert(“IP值是:”+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))
符号解释:

既然组件的核心作用是返回React元素,那么最简单的组件就是一个返回React元素的函数:

字符
描述

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

\
将下一个字符标记为一个特殊字符、或一个原义字符、或一个
向后引用、或一个八进制转义符。例如,’n’ 匹配字符 “n”。’\n’
匹配一个换行符。序列 ‘\\’ 匹配 “\” 而 “\(” 则匹配 “(“。

Welcome是一个用函数定义的组件。如果使用类(class)定义组件,返回React元素的工作具体就由组件的render方法承担,例如:

发表评论

电子邮件地址不会被公开。 必填项已用*标注