用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 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
vue.js表格分页示例
Oct 18 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
配置支持SSI
2006/11/25 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
jquery动态添加删除一行数据示例
2014/06/12 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Django操作session 的方法
2020/03/09 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
店长岗位的工作内容
2013/11/12 职场文书
委托书范本
2014/04/02 职场文书
房屋租赁协议书
2014/04/10 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js