常见开发需求之js处理url汉字编码中的乱码
需求及解决
两个页面传值的需求是很常见的,angular中有很多常见的方法用于传值,而且都不会受到字符编码的影响,而采用传统的url中拼字符串进行传值的操作,如果拼串中涉及到中文字符,我们就要考虑页面的编码问题了。
如如下的地址
http://www.xxx.com/ddd?type=10&gn=你好
经过url编码转变为
http://www.xxx.com/ddd?type=10&gn=%E5%81
从而导致如果直接获取这个值会出现异常显示
通常我们要解决两个问题:
- 将search部分可能存在编码的字符串从地址中提取出来,如需要处理编码的其实就只是gn这个参数
- 判断该字符串是否进行了编码,并对其进行操作
网上有很多方法,使用起来效率不高而且还报错,我这里总结了一个可用的,代码如下:
//传入可能出现编码的key值,返回相应的value
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if(r != null) return(r[2]);
return null;
}
//测试用的数据
var gn = GetQueryString("gn");
//判断gn是否编码,如果编码了就进行解码
if(!(gn.indexOf( "%" )<0)) {
gn = decodeURI(gn);
}
核心原理是使用正则匹配,然后判断字符串是否以%开头,所以这种方法只适用于url编码的问题,其他编码大家自行修改就成。
常见开发需求之js处理url汉字编码中的乱码的更多相关文章
- 用JS解决url地址中参数乱码的问题
var url = window.location.herf;//获取url地址 var obj = {}; //最后输出的对象 var reg = /\?/; //要匹配的正则表达式 if(url. ...
- 常见开发需求之前端利器webstorm中的git和快捷键
需求 前端开发中我们最常用的一般是webstorm.hbuilder和sublime,因为以前使用过一段时间eclipse所以我对webstorm的感觉比较良好,再加上以前使用hbuilder维护 ...
- js获取url(request)中的参数
index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数,根据获取html的参数值控制htm ...
- URL地址中中文乱码详解(javascript中encodeURI和decodeURI方法、java.net.URLDecoder.encode、java.net.URLDecoder.decode)
引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生了,该如何解决呢?且听本文详细道来. ...
- 常见开发需求之angular上拉加载更多
需求 移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...
- js获取url链接中的域名部分
用js提取出url中的域名(domain)部分,用split()函数就可以了. 因为一个正确的url必定是由http://或者是https://.domain.路径/参数组成,所以可以用split以/ ...
- vagrant nginx php开发环境中浏览器访问js文件,文件中出现乱码的解决方法
当nginx配置 sendfile设置为on时,某些js文件中会出现奇怪的字符: ����������������� 不管怎么刷新,重启服务都无效: 通过google搜索之后发现原来是因为开启send ...
- js获取URL地址中的GET参数
var $_GET = (function(){ var url = window.document.location.href.toString(); var u = url.split(" ...
- JS解决URL传递参数中文乱码问题
function getUrlParam(name){ // 用该属性获取页面 URL 地址从问号 (?) 开始的 URL(查询部分) var url = window.location.search ...
随机推荐
- VMware安装ubuntu虚拟机
创建虚拟机完成. 安装操作系统. 中文版界面: 中文版界面: 稍等在重启 重新启动虚拟机. 安装VMtools 双击该图标 安装完成,重新启动系统. 如果在安装的时候,主机名没有修改 看着太长 如何修 ...
- iOS - 沙盒与目录
NSFileManager NSBundle Class Cluster 采用Tagged Pointer的字符串 NSPathStore iOS证书ipa包重签名探究 url 结构 1. iOS 沙 ...
- jQuery animate动画 stop()方法详解~
一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...
- kettle参数、变量详细讲解[转]
kettle 3.2 以前的版本里只有 variable 和 argument,kettle 3.2 中,又引入了 parameter 概念:variable 即environment variabl ...
- Centos下安装jdk
下载 由于oracle官网下载jdk需要网站验证,所以不能使用wget直接下载. 一种比较快的方式是在本地下载tar.gz或者rpm,之后上传到Linux. tar.gz格式只需解压,放到指定目录下, ...
- WebApplicationInitializer (spring 3.x.x以上版本)
实现WebApplicationinitializer接口的类都可以在web应用程序启动时被加载. 那么来想一个问题:为什么实现了WebApplicationInitializer这个接口后,onSt ...
- Shader 学习笔记
Shader "Custom/Diffuse Texture" { // Shader的开始,双引号内饰该Shader的名字 Properties { _MainTex (&quo ...
- [Search Engine] 搜索引擎技术之网络爬虫
随着互联网的大力发展,互联网称为信息的主要载体,而如何在互联网中搜集信息是互联网领域面临的一大挑战.网络爬虫技术是什么?其实网络爬虫技术就是指的网络数据的抓取,因为在网络中抓取数据是具有关联性的抓取, ...
- 腾讯WEB前端开发面试经历,一面二面HR面,面面不到!
[一面]~=110分钟 2014/09/24 11:20 星期三 进门静坐30分钟做题. 填空题+大题+问答题 >>填空题何时接触电脑 何时接触前端运算符 字符串处理 延 ...
- ngnix 配置CI框架 与 CI的简单使用
ngnix 支持 CI框架1.修改config.php 参考网址:https://www.chenyudong.com/archives/codeigniter-in-nginx-and-url-re ...