<(\S*?) [^>]*>.*?</\1>|<.*? />
匹配
<html>hello</html>|<a>abcd</a>
abc|123|<html>ddd
正则表达式
^[^<>`~!/@\#}$%:)(_^{&*=|'+]+$
匹配
This is a test
不匹配
<href = | <br>| That's it
正则表达式
<!--.*?-->
匹配
<!-- <h1>this text has been removed</h1>-->| <!-- yada -->
不匹配
<h1>this text has not been removed</h1>
正则表达式
(\[(\w+)\s*(([\w]*)=('|")?([a-zA-Z0-9|:|\/|=|-|.|\?|&]*)(\5)?)*\])([a-zA-Z0-9|:|\/|=|-|.|\?|&|\s]+)(\[\/\2\])
匹配
[link url="http://www.domain.com/file.extension?getvar=value&secondvar=value"]Link[/li
不匹配
[a]whatever[/b] | [a var1=something var2=somethingelse]whatever[/a] | [a]whatever[a]
正则表达式
href=[\"\'](http:\/\/|\.\/|\/)?\w+(\.\w+)*(\/\w+(\.\w+)?)*(\/|\?\w*=\w*(&\w*=\w*)*)?[\"\']
匹配
href="www.yahoo.com" | href="http://localhost/blah/" | href="eek"
不匹配
href="" | href=eek | href="bad example"
正则表达式
"([^"](?:\\.|[^\\"]*)*)"
匹配
"This is a \"string\"."
不匹配
"This is a \"string\".
正则表达式
(?i:on(blur|c(hange|lick)|dblclick|focus|keypress|(key|mouse)(down|up)|(un)?load|mouse(move|o(ut|ver))|reset|s(elect|ubmit)))
匹配
onclick | onsubmit | onmouseover
不匹配
click | onandon | mickeymouse
正则表达式
(?s)/\*.*\*/
匹配
/* .................... */ | /* imagine lots of lines here */
不匹配
*/ malformed opening tag */ | /* malformed closing tag /*
正则表达式
<(\S*?) [^>]*>.*?</\1>|<.*? />
匹配
<html>hello</html>|<a>abcd</a>
不匹配
abc|123|<html>ddd
正则表达式
\xA9
匹配
©
不匹配
anything
正则表达式
src[^>]*[^/].(?:jpg|bmp|gif)(?:\"|\')
匹配
src="../images/image.jpg" | src="http://domain.com/images/image.jpg" | src='d:\w
不匹配
src="../images/image.tif" | src="cid:value"
正则表达式
/\*[\d\D]*?\*/
匹配
/* my comment */ | /* my multiline comment */ | /* my nested comment */
不匹配
*/ anything here /* | anything between 2 seperate comments | \* *\
正则表达式
<[a-zA-Z]+(\s+[a-zA-Z]+\s*=\s*("([^"]*)"|'([^']*)'))*\s*/>
匹配
<img src="test.gif"/>
不匹配
<img src="test.gif">| <img src="test.gif"a/>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
select {width: 75pxfont-size: 20pxcolor:#000000font-family: '宋体'}
#main {width: 400pxheight: 20pxmargin:0 autoword-spacing: 0px}
#main select { color:green}
#main select[name=S1] { color:orange}
</style>
</head>
<body>
<div id="main"></div>
<script>
initSelects()
function initSelects() {
var data = {
10:[
[12,110,190,'ESA1210'],
[16,150,230,'ESA1610'],
[20,190,270,'ESA2010']
],
20: [
[24,230,310,'ESA2410'],
[28,270,350,'ESA2810'],
[32,310,390,'ESA3210'],
[36,350,430,'ESA3610']
],
40: [
[40,390,470,'ESA4010'],
[44,430,510,'ESA4410'],
[48,470,550,'ESA4810'],
[52,510,590,'ESA5210']
]
}
var selectNames = ['S1', 'S2', 'S3', 'S4', 'S5']
var sunits = ['mm', 'n', 'mm', 'mm', '']
var main = document.getElementById('main')
var S1 = document.createElement('select')
S1.name = selectNames[0]
S1.onchange = function() {
for(var i = 0i <SG2s.lengthi++)
SG2s[i].options.length = 0
data[this.value].forEach(function(line) {
for(var i = 0i <SG2s.lengthi++) {
var atom = line[i]
SG2s[i].options.add( new Option(atom + sunits[i], atom) )
}
})
}
for(var y in data)
S1.options.add(new Option(y + select[0], y))
main.append(S1)
var SG2s = []
var names
for(var i = 0i <4i++) {
var s = document.createElement('select')
s.name = selectNames[i + 1]
s.onchange = function() {
for(var i = 0i <SG2s.lengthi++)
SG2s[i].selectedIndex = this.selectedIndex
}
SG2s.push(s)
main.append(s)
}
S1.onchange()
}
</script>
</body>
</html>
一般都是先排序再渲染，可以是服务器端直接输出排序结果直接渲染，也可以获取数据之后排序完再渲染。如果是渲染完再排序那么页面会发生”闪现“，严重点会出现页面短暂混乱，如果列表很长那么页面将”自己动起来“，很吓人的。比起页面”自己动起来“宁愿让它短暂的"转圈圈"一点点加载。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）