-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·165 lines (138 loc) · 5.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE HTML>
<div style="width: 800px; margin: 50px auto;">
<h1>玩转正则之 highlight 高亮</h1>
<p>作者： <a href="http://www.barretlee.com/">Barret Lee</a></p>
<textarea id="barret-codes" style="width:530px; height:530px; resize:none; display:none;" readonly>
/**
* @author barret lee
* @date 2013-10-06
* @email [email protected]
*/
//outer var
var a = "this id outer string";
//closure
function b() {
//inner var
var a = "this is inner string";
var g = a.replace(/this is inner string/g, function() {
return new Function("/*clousure*/this.a")();
});
/**
* @description closure - regExp test
* @author barret lee
*/
function c() {
return {
a: a,
g: g
}
}
return c;
}
var s = b()(); //s.a, s.g
</textarea>
<div style="position:relative;">
<div style="display:inline-block; border: 1px dashed #999; background:#FAFAFA; vertical-align:top; padding:15px; *width:504px; font:14px/16px Monaco,Consolas,微软雅黑;color:white;background:black" id="barret-container"></div>
<div style="position:absolute; top: 30px; left: 300px; padding: 12px; border-radius: 12px; background:#000;color:white; max-width: 360px; min-height: 60px; border: 2px solid #CCC; box-shadow: 2px 2px 3px #CCC; font-family:Monaco,Consolas,微软雅黑; font-size:14px; line-height:18px; overflow:hidden;" id="barret-note">
<a href="javascript:void(0);" onclick="showBtn.autorun();return false;">点击开始演示</a>
</div>
</div>
</div>
<a href="https://github.com/demo-platform/reg-highlight"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://www.barretlee.com/blogimgs/forkme.png" alt="Fork me on GitHub"></a>
<script type="text/javascript">
var codes_p = "",
barret_notes = document.getElementById("barret-note");
var Highlight = function (obj, code) {
var target = document.getElementById(obj),
codes = code || (target.value ? target.value : target.innerHTML) || "Detect no codes";
var colors = {
string: "#FFA0A0",
reg: "#16E916",
note: "#888",
tag: "orange",
keywords: "#B0B0FF"
};
//step config
var config = {
regs: [
/^\s+|\s+$/g,
/(["'])(?:\\.|[^\\\n])*?\1/g,
/\/(?!\*|span).+\/(?!span)[gim]*/g,
/(\/\/.*|\/\*[\S\s]+?\*\/)/g,
/(\*\s*)(@\w+)(?=\s*)/g,
/\b(break|continue|do|for|in|function|if|else|return|switch|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void|Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location|true|false|null|undefined|NaN)\b/g
],
funcs: [
"",
"<span style='color:"+colors.string+"'>$&</span>",
"<span style='color:"+colors.reg+"'>$&</span>",
"<span style='color:"+colors.note+"'>$1</span>",
"$1<span style='color:"+colors.tag+"'>$2</span>",
"<span style='color:"+colors.keywords+"'>$1</span>"
],
notes: [
"第一步，处理每行首未的空格(效果可能不明显)",
"第二步，处理双引号或单引号的string",
"第三步，处理正则表达式",
"第四步，处理注释部分",
"第五步，处理注释中的标记",
"第六步，处理关键词"
]
};
codes_p = codes;
//steps
function steps(num){
for(var i = 0; i < num; i++){
//console.log("codes_p = codes_p.replace(" + config.regs[i] + ",\"" + (config.funcs[i]||"") + "\")");
eval("codes_p = codes_p.replace(" + config.regs[i] + ",\"" + (config.funcs[i]||"") + "\")");
}
codes_p = codes_p.replace(/(\/\/.*?<span)(.+?)(>.*)/g, "$1$3")
.replace(/\t/g, " ")
.replace(/\n/mg, "<br />");
return codes_p;
}
//render
function render (container, num) {
var container = document.getElementById(container);
num = num == null || num > 6 ? 6 : num;
container && (container.innerHTML = steps(num));
barret_notes.innerHTML = "<span style='border: 1px dashed #333;padding:4px;display:inline-block; background: #111;color:white;word-break:break-all;word-wrap:break-word'>replace(<span style='color:"+colors.reg+"'>" + config.regs[num] + "</span>,<span style='color:"+colors.string+"'>\"" + (config.funcs[num]||"") + "\"</span>);</span><p style='color:#A3A3A3'> "+config.notes[num]+'<a href="javascript:void(0);" onclick="showBtn.go();return false" style="display:inline-block;margin-left:6px;color:#00C2FF">下一步>></a></p>';
}
return {
res: codes,
render: render
}
};
var barret_controller = {
barret_timer: null,
barret_index: 0,
init: function() {
Highlight("barret-codes").render("barret-container", this.barret_index);
return this;
},
autorun: function (){
var z = 0;
this.init();
this.barret_timer = setInterval(function(){
z++ > 6 && clearInterval(this.barret_timer);
Highlight("barret-codes").render("barret-container", z);
}, 2500);
},
go: function (){
this.stop();
if(this.barret_index > 6) {
barret_notes.innerHTML = '<a href="javascript:void(0);" onclick="showBtn.go();return false;" style="font-size:24px; line-height:60px; color:orange; text-decoration:none">点击重新开始</a>';
this.barret_index = 0;
return this;
}
Highlight("barret-codes").render("barret-container", this.barret_index++);
},
stop: function (){
clearInterval(this.barret_timer);
return this;
}
};
var showBtn = barret_controller.init();
barret_notes.innerHTML = '<a href="javascript:void(0);" onclick="showBtn.go();return false;" style="font-size:24px; line-height:60px; color:orange; text-decoration:none">点击开始演示</a>';
</script>
<script src='http://www.barretlee.com/demo-platform.js'></script>