用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的extend和fn.extend的使用说明
Jan 09 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 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中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
原生JS实现微信通讯录
2020/06/18 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
实用自动化运维Python脚本分享
2018/06/04 Python
详解django.contirb.auth-认证
2018/07/16 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
python实现年会抽奖程序
2019/01/22 Python
python调用接口的4种方式代码实例
2019/11/19 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
linux下进程间通信的方式
2014/12/23 面试题
社区学雷锋活动策划方案
2014/01/30 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
nginx结合openssl实现https的方法
2021/07/25 Servers