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弹性运动实现方法分析

    JS弹性运动实现方法分析

    这篇文章主要介绍了JS弹性运动实现方法,结合实例形式分析了JS实现弹性运动的原理、相关技术细节与实现技巧,需要的朋友可以参考下
    2016-12-12
  • 如何在 xHTML 中验证 noscript+meta refresh 标签

    如何在 xHTML 中验证 noscript+meta refresh 标签

    这篇文章主要介绍了如何在 xHTML 中验证 noscript+meta refresh 标签,需要的朋友可以参考下
    2023-03-03
  • IE与FireFox中的childNodes区别

    IE与FireFox中的childNodes区别

    Javascript中,相信大家都试过用getElementsByTagName和childNodes来实现对节点的遍历
    2011-10-10
  • 原生js实现自定义滚动条

    原生js实现自定义滚动条

    这篇文章主要为大家详细介绍了原生js实现自定义滚动条,可点击、拖动到达,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 关于JavaScript数组你所不知道的3件事

    关于JavaScript数组你所不知道的3件事

    这篇文章主要为大家详细介绍了关于JavaScript数组三个并不那么常见的功能,你所不知道的事情,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JS实现仿QQ面板的手风琴效果折叠菜单代码

    JS实现仿QQ面板的手风琴效果折叠菜单代码

    这篇文章主要介绍了JS实现仿QQ面板的手风琴效果折叠菜单代码,涉及JavaScript基于鼠标事件动态操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 纯js实现动态时间显示

    纯js实现动态时间显示

    这篇文章主要为大家详细介绍了纯js实现动态时间显示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS实现仿百度文库评分功能

    JS实现仿百度文库评分功能

    本文给大家分享基于js实现仿百度文库评分功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-01-01
  • JavaScript中闭包的4个有用技巧分享

    JavaScript中闭包的4个有用技巧分享

    当谈到JavaScript编程中的高级概念和技巧时,闭包(Closures)是一个重要而有趣的主题,闭包是一种函数与其创建时的词法环境的组合,它允许我们捕获和保留局部变量,并在函数之外使用它们,在这篇文章中,我们将深入探讨JavaScript中闭包的4种有用技巧
    2023-10-10
  • File, FileReader 和 Ajax 文件上传实例分析(php)

    File, FileReader 和 Ajax 文件上传实例分析(php)

    File, FileReader 和 Ajax 文件上传实例分析(php),需要的朋友可以参考下。
    2011-04-04

最新评论