js前端URL含有特殊字符的转码的实现

 更新时间:2023年06月28日 09:18:54   作者:迷途小码农008  
本文主要介绍了js前端URL含有特殊字符的转码的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了。下表中列出了一些URL特殊符号及编码 

十六进制值 
1. + URL 中+号表示空格 %2B 
2. 空格 URL中的空格可以用+号或者编码 %20 
3. / 分隔目录和子目录 %2F 
4. ? 分隔实际的 URL 和参数 %3F 
5. % 指定特殊字符 %25 
6. # 表示书签 %23 
7. & URL 中指定的参数间的分隔符 %26 
8. = URL 中指定参数的值 %3D 

问题:url 传有特殊字符出现丢失,因为特殊字符会被特殊处理

特殊字符对应的码

方法一:正则替换

var str = str.replace(/\+/g, "%2B"); //"+" 转义  
var str = str.replace(/\&/g, "%26"); //"&" 转义
var str = str.replace(/\#/g, "%23"); //"#" 转义

方法二:encodeURIComponent(str) 方法 (推荐)

let str = 'NBA+';
str = encodeURIComponent(str);
console.log(str) // NBA%2B
  • 当然,可以两者结合,再你不知道该特殊字符的转义的时候,可以使用 encodeURIComponent() 来得到,就像你不知道键盘某键的keyCode一样
  • 另外,decodeURIComponent() 是解码, decodeURIComponent(encodeURIComponent("+")) === '+' , true

到此这篇关于js前端URL含有特殊字符的转码的实现的文章就介绍到这了,更多相关js URL特殊字符转码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现addClass,removeClass,hasClass的函数代码

    js实现addClass,removeClass,hasClass的函数代码

    js实现addClass,removeClass,hasClass的函数代码,需要的朋友可以参考下。
    2011-07-07
  • Uniapp如何封装网络请求方法demo

    Uniapp如何封装网络请求方法demo

    这篇文章主要为大家介绍了Uniapp如何封装网络请求方法demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • JavaScript中的Proxy-Reflect操作方法

    JavaScript中的Proxy-Reflect操作方法

    这篇文章主要介绍了JavaScript中的Proxy-Reflect操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • JavaScript 对象成员的可见性说明

    JavaScript 对象成员的可见性说明

    与java等基于类的面向对象语言的private、protected、public等关键字的用途类似,基于对象的JavaScript语言,在对象构造上也存在类似的成员可见性问题。
    2009-10-10
  • JavaScript ESLint插件保姆级使用教程

    JavaScript ESLint插件保姆级使用教程

    ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具
    2022-08-08
  • javascript中的变量作用域以及变量提升详细介绍

    javascript中的变量作用域以及变量提升详细介绍

    在javascript中, 理解变量的作用域以及变量提升是非常有必要的。这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解
    2013-10-10
  • 纯JavaScript代码实现文本比较工具

    纯JavaScript代码实现文本比较工具

    之前项目需求需要写一个纯js文本比较工具,在此小编把代码分享在脚本之家平台供大家参考
    2016-02-02
  • javascript实现动态标签云

    javascript实现动态标签云

    JS标签云效果,在鼠标的作用下会自动转动,整体上围绕成一个圆形,各个标签之间无需Div代码,直接文字+链接的形式,有多少就显示多少,JavaScript会自动调整显示数量,让视觉效果最佳。
    2015-10-10
  • javascript+canvas制作九宫格小程序

    javascript+canvas制作九宫格小程序

    这篇文章主要介绍了javascript+canvas制作九宫格小程序,效果非常棒,这里推荐给有需要的小伙伴们
    2014-12-12
  • JavaScript中的全局属性与方法深入解析

    JavaScript中的全局属性与方法深入解析

    这篇文章主要给大家介绍了关于JavaScript中全局属性与方法的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-06-06

最新评论