用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 相关文章推荐
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
微信小程序实现watch监听
Jun 04 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
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
Content-type 的说明
2006/10/09 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
PHP实现事件机制的方法
2015/07/10 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python使用append合并两个数组的方法
2015/04/28 Python
python实现xlsx文件分析详解
2018/01/02 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
使用python存储网页上的图片实例
2018/05/22 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
心理学专业毕业生推荐信范文
2013/11/21 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
2014年度党员自我评议
2014/09/13 职场文书
西安大雁塔导游词
2015/02/10 职场文书
主持稿开场白
2015/06/01 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android