用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,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
javascript操作向表格中动态加载数据
Aug 27 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php jsonp单引号转义
2014/11/23 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Python中常见的数据类型小结
2015/08/29 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Python Requests库基本用法示例
2018/08/20 Python
泰国第一在线超市:Tops
2021/02/13 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB