用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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
Babel 入门教程学习笔记
Jun 13 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实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
php中的登陆login实例代码
2016/06/20 PHP
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python学生信息管理系统(完整版)
2020/04/05 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
个人自我评价范文
2014/02/05 职场文书
商业项目策划方案
2014/06/05 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
技术员个人工作总结
2015/03/03 职场文书
城南旧事观后感
2015/06/11 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
Python 如何安装Selenium
2021/05/06 Python
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers