[原]利用JavaScript解析UBB标签生成HTML
Posted by bianbian on 2006-08-27 18:11
本文Tags: HTML, JavaScript, UBB
UBB标签作为HTML标签的安全替代，在网络上应用已经十分广泛。常规的做法是服务器端解析，这类代码几乎泛滥，我就不贴了。唯一的问题是比较耗服务器的CPU（字符串匹配、正则匹配），其实这种活我都喜欢让客户端做。
作为演示，我下面的代码将解析[b]、[i]、[url]、[img]、[color]、[wma]、[flash]这几个常见的UBB标签。主要利用了JavaScript的正则表达式。正则表达式语法可以察看：正则表达式语法，下面代码的测试可以察看：测试UBB标签解析。
- function text2html(s)
- {
- if(s.indexOf("://") > 0)
- {
- //url
- s = s.replace(/(^|[^\"\'\]])(http|ftp|mms|rstp|news|https)\:\/\/([^\s\033\[\]\"\']+)/gi, "$1[url]$2://$3[/url]");
- //img
- s = s.replace(/\[url\](http\:\/\/\S+\.)(gif|jpg|jpeg|png)\[\/url\]/gi, "[img]$1$2[/img]");
- }
- //ubb: 匹配[UBB]...[/UBB]形式
- if(s.match(/\[(\w+)([^\[\]\s]*)\].*\[\/\1\]/))
- {
- s = s.replace(/\[url\](.+?)\[\/url\]/gi,"<a href=$1 target=_blank>$1</a>");
- s = s.replace(/\[img\](.+?\.(?:gif|jpg|jpeg|png))\[\/img\]/gi, "<img src='$1' alt='$1'>");
- s = s.replace(/\[flash\](.+?\.swf)\[\/flash\]/gi, "<embed src='$1' quality=high wmode=transparent type='application/x-shockwave-flash' width=400 height=300></embed><br> FLASH: <a href='$1' target=_blank>$1</a><br>");
- s = s.replace(/\[wma\](.+?\.(?:wma|mp3))\[\/wma\]/gi, "<embed src='$1' height=40 AutoStart=0></embed><br> WMA: <a href='$1' target=_blank>$1</a><br>");
- s = s.replace(/\[color=([#0-9a-zA-Z]{1,10})\](.+?)\[\/color\]/gi, "<font color='$1'>$2</font>");
- s = s.replace(/\[b\](.+?)\[\/b\]/gi, "<b>$1</b>");
- s = s.replace(/\[i\](.+?)\[\/i\]/gi, "<i>$1</i>");
- }
- return s;
- }
接下来的问题是怎样把文本传递到函数里，一个自己的经验是把待解析的文本放到textarea里，这样可以避免<和>等特殊符号的转义（即<、>），放到textarea里转义的工作就自动被浏览器做了。
唯一的也是比较严重的问题是待解析的文本里不能有“</textarea>”，否则浏览器会认为本文已经结束，其后的文本将被浏览器当成HTML代码——这是很危险的，想想看，用户输入“</textarea>”之后就可以插入任何HTML代码！解决的办法是服务器端输出文本内容的时候，将“</textarea”拆开，比如输出“< /textarea”或“</text area”都是可以的。要注意，不能整个搜寻替换“</textarea>”，因为有可能别有用心的用户会输入“</textarea >”，这会带来同样的问题（最近部分小百合用户的说明档被改就是因为这个漏洞）。也许你会问，这样不是服务器端每次生成页面的时候又进行字符串匹配了吗？对性能有什么提高呢？OK，我们可以在用户提交数据的时候进行这样的替换，“绝对不要相信客户端”，这是一个web程序员应该具有的基本观念。
标签: HTML, JavaScript, UBB遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | 2 Comments »
