Javascript 利用 DOM 特性的两个小技巧
作者:mingcheng 来源:gracecode.com 时间:2009-02-28 14:07:00
此类技巧还有很多,欢迎继续分享
解析 URL
从 James Padolsey 的 Blog中看到的个小技巧,就是利用 a 标签的 DOM 属性解析 URL 字符串。
// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).
function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':',''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function(){
var ret = {},
seg = a.search.replace(/^\?/,'').split('&'),
len = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
hash: a.hash.replace('#',''),
path: a.pathname.replace(/^([^\/])/,'/$1'),
relative: (a.href.match(/tp:\/\/[^\/]+(.+)/) || [,''])[1],
segments: a.pathname.replace(/^\//,'').split('/')
};
}
可对比下“传统的”正则解析方式(取自 Tbra 库),至少上面代码看起来更容易理解得多
parseURL: (function() {
var keys = ['source',
'prePath',
'scheme',
'username',
'password',
'host',
'port',
'path',
'dir',
'file',
'query',
'fragment'];
var re = /^((?:([^:\/?#.]+):)?(?:\/\/)?(?:([^:@]*):?([^:@]*)?@)?([^:\/?#]*)(?::(\d*))?) \
((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*)) \
(?:\?([^#]*))?(?:#(.*))?/;
return function(sourceUri) {
var uri = {};
var uriParts = re.exec(sourceUri);
for(var i = 0; i < uriParts.length; ++i) {
uri[keys[i]] = (uriParts[i] ? uriParts[i] : '');
}
return uri;
}
})();
(反)转义 HTML
取自 Prototype 中的相应代码
escapeHTML: function(str) {
var div = document.createElement('div');
var text = document.createTextNode(str);
div.appendChild(text);
return div.innerHTML;
}
unescapeHTML: function(str) {
var div = document.createElement('div');
div.innerHTML = str.replace(/<\/?[^>]+>/gi, '');
return div.childNodes[0] ? div.childNodes[0].nodeValue : '';
}
标签:DOM,url,javascript,技巧
0
投稿
猜你喜欢
CSS扫盲(一): padding
2009-08-04 17:58:00
ASP sql:rs.open语句详细说明
2008-03-17 11:30:00
Zen Coding: 一种快速编写HTML/CSS代码[译]
2009-12-16 12:53:00
JScript 的内存回收
2007-10-16 20:02:00
ASP生成数字相加求和的BMP图片验证码
2011-04-14 10:48:00
寻找Dreamweaver鲜为人知的小秘诀
2008-04-28 12:10:00
实用技巧:优化SQL Server数据库查询方法
2009-02-04 13:46:00
图片格式与设计那点事儿
2011-01-06 12:17:00
一段ASP单页显示文件夹下所有图片的代码
2011-02-28 11:23:00
jQuerify书签
2008-06-16 12:16:00
二级联动下拉菜单javascript源码
2010-03-16 12:32:00
Access保留字和变量名列表
2007-10-15 12:43:00
oracle 下WITH CHECK OPTION用法
2009-02-28 10:59:00
RDFa介绍——构建更友好的web页面
2009-09-19 17:01:00
20个Javascript手风琴折叠菜单
2009-10-12 12:09:00
IE8将是IE的最后一个版本?
2009-03-12 12:44:00
MYSQL教程:数据列类型与查询效率
2009-02-27 15:37:00
ORACLE8的分区管理
2010-07-30 13:18:00
PJBlog3优化——301定向跳转解决重复内容的问题
2009-05-20 10:40:00
中国传统色彩名录
2007-11-29 18:36:00