用JavaScript实现PHP的urlencode与urldecode函数


Posted in Javascript onAugust 13, 2015

很多朋友说JavaScript的decodeURI函数也可以实现,但有bug所有呢,下面看下下面的函数,经过测试使用暂时没什么问题,我在之前的文章说过,这个和php的urldecode函数根本不是一回事。下面是我根据高人的代码改写的JavaScript版的urldecode函数,参考的链接在开头提到的文章中有,就不一一列举了。和之前的urlencode函数一样,只实现了utf-8版的。

1、urlencode

使用方法: urlencode(str);

function urlencode(clearString) 
{
	var output = '';
	var x = 0;
	
	clearString = utf16to8(clearString.toString());
	var regex = /(^[a-zA-Z0-9-_.]*)/;

	while (x < clearString.length) 
	{
		var match = regex.exec(clearString.substr(x));
		if (match != null && match.length > 1 && match[1] != '') 
		{
			output += match[1];
			x += match[1].length;
		} 
		else 
		{
			if (clearString[x] == ' ')
				output += '+';
			else 
			{
				var charCode = clearString.charCodeAt(x);
				var hexVal = charCode.toString(16);
				output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
			}
			x++;
		}
	}

	function utf16to8(str) 
	{
		var out, i, len, c;

		out = "";
		len = str.length;
		for(i = 0; i < len; i++) 
		{
			c = str.charCodeAt(i);
			if ((c >= 0x0001) && (c <= 0x007F)) 
			{
				out += str.charAt(i);
			} 
			else if (c > 0x07FF) 
			{
				out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
				out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
				out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
			} 
			else 
			{
				out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
				out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
			}
		}
		return out;
	}

	return output;
}

2、urldecode

使用方法:urldecode(url);

function urldecode(encodedString)
{
	var output = encodedString;
	var binVal, thisString;
	var myregexp = /(%[^%]{2})/;
	function utf8to16(str)
	{
		var out, i, len, c;
		var char2, char3;

		out = "";
		len = str.length;
		i = 0;
		while(i < len) 
		{
			c = str.charCodeAt(i++);
			switch(c >> 4)
			{ 
				case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
				out += str.charAt(i-1);
				break;
				case 12: case 13:
				char2 = str.charCodeAt(i++);
				out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
				break;
				case 14:
				char2 = str.charCodeAt(i++);
				char3 = str.charCodeAt(i++);
				out += String.fromCharCode(((c & 0x0F) << 12) |
						((char2 & 0x3F) << 6) |
						((char3 & 0x3F) << 0));
				break;
			}
		}
		return out;
	}
	while((match = myregexp.exec(output)) != null
				&& match.length > 1
				&& match[1] != '')
	{
		binVal = parseInt(match[1].substr(1),16);
		thisString = String.fromCharCode(binVal);
		output = output.replace(match[1], thisString);
	}
	
	//output = utf8to16(output);
	output = output.replace(/\\+/g, " ");
	output = utf8to16(output);
	return output;
}

当服务器端通过php的urlencode转码的就可以使用js的urldecode进行解析即可。

Javascript 相关文章推荐
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 Javascript
vscode中使用npm安装babel的方法
Aug 02 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 #Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 #Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 #Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 #Javascript
基于jQuery实现动态数字展示效果
Aug 12 #Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 #Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 #Javascript
You might like
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
记React connect的几种写法(小结)
2018/09/18 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
详解Python字符串对象的实现
2015/12/24 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Python使用python-docx读写word文档
2019/08/26 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
大学生简单自荐信
2013/11/10 职场文书
健康家庭事迹材料
2014/05/02 职场文书
人事专员岗位说明书
2014/07/29 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
家属联谊会致辞
2015/07/31 职场文书
实例详解Python的进程,线程和协程
2022/03/13 Python
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL