用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 相关文章推荐
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
Vue 实现登录界面验证码功能
Jan 03 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
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python绘制3D图形
2018/05/03 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Django 路由控制的实现
2019/07/17 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
python RSA加密的示例
2020/12/09 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
技校毕业生自荐书
2014/05/23 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2014年药房工作总结
2014/11/22 职场文书
入党介绍人意见范文
2015/06/01 职场文书
创业计划书之美甲店
2019/09/20 职场文书