用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中live方法的重复绑定说明
Oct 21 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
Javascript事件实例详解
Nov 06 Javascript
js style动态设置table高度
Oct 21 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
vue-hook-form使用详解
Apr 07 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 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数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
js实现电灯开关效果
2021/01/19 Javascript
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
通过实例解析Python调用json模块
2019/12/11 Python
python性能测试工具locust的使用
2020/12/28 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
外企办公室竞聘演讲稿
2013/12/29 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
销售个人求职信范文
2014/04/28 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
学期个人工作总结
2015/02/13 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
python在package下继续嵌套一个package
2022/04/14 Python
PHP RabbitMQ消息列队
2022/05/11 PHP