一 , 对字符串进行编码

 var str = "岁月不居，时节如流"console.log(str);str = encodeURI(str)console.log("====编码之后====");console.log(str);

控制台打印

二 , 对字符串进行解码

var str ="%E5%B2%81%E6%9C%88%E4%B8%8D%E5%B1%85%EF%BC%8C%E6%97%B6%E8%8A%82%E5%A6%82%E6%B5%81"console.log(str);
str = decodeURI(str)
console.log("====解码之后====");
console.log(str)

控制台打印

三 , 当url中出现 %0A , %20 这种元字符时 , 也可以用decodeURI进行解码 , 可以还原字符串原本的含义 , 比如 %0A是换行 , %20是空格

在url中, "+" , "/" , "?" , "%" , "#" , "&" 是有特殊意义的，被称为url的元字符。

符号	特殊含义	十六进制
+	表示空格（在url中不能使用空格）	%20
/	分割目录和子目录	%2F
？	分割实际的URL和参数	%3F
%	指定特殊字符	%25
#	表示书签	%23
&	URL中指定的参数间的分隔符	%26

代码

  var urlStr="岁月不居，时节如流。远!%0A%20%20%20%20%20%20%20%20%20%20 今年，是渝新时代!%0A%0A今年，是愿你，历尽艰辛，初心依旧!"console.log(urlStr);urlStr= decodeURI(urlStr)console.log("====解码之后====");console.log(urlStr);

控制台打印 (换行和空格显示出来了)

但是如果这时候用普通标签渲染这段文字 , 换行和空格是不会显示在页面的 , 如图

代码

<body><p id="jy"></p>
</body>
<script>var jy ="岁月不居，时节如流。远!%0A%20%20%20%20%20%20%20%20%20%20 今年，是渝新时代!%0A%0A今年，是愿你，历尽艰辛，初心依旧!"console.log(jy);jy = decodeURI(jy)console.log("====解码之后====");console.log(jy);var jyBox = document.getElementById("jy")jyBox.innerHTML = jy</script>

页面

这时候我们需要把某一段规定好的文本格式放在HTML中，那么就要利用pre标签的特性

代码

<body><pre id="jy"></pre>
</body>
<script>var jy ="岁月不居，时节如流。远!%0A%20%20%20%20%20%20%20%20%20%20 今年，是渝新时代!%0A%0A今年，是愿你，历尽艰辛，初心依旧!"console.log(jy);jy = decodeURI(jy)console.log("====解码之后====");console.log(jy);var jyBox = document.getElementById("jy")jyBox.innerHTML = jy
</script>
<style>pre {white-space: pre-wrap;}
</style>

页面

关于pre标签 , 我之前也写过文章 , 可以详细了解下 ==>

字符串里有\r \n \t 等特殊符号, 前端页面怎么显示出来_调调啊的博客-CSDN博客

前端encodeURI , decodeURI对字符串编码解码 , 以及把url中的%0A %20解码成换行和空格相关推荐

JS 字符串编码函数（解决URL特殊字符传递问题）：escape()、encodeURI()、encodeURIComponent()区别详解
JS 字符串编码函数(解决URL特殊字符传递问题):escape().encodeURI().encodeURIComponent()区别详解参考文章: (1)JS 字符串编码函数(解决URL特殊字 ...
JS 字符串编码函数（解决URL特殊字符传递问题）：escape()、encodeURI()、encodeURIComponent()区别详解...
转:http://www.cnblogs.com/qiantuwuliang/archive/2009/07/19/1526687.html //该方法不会对 ASCII 字母和数字进行编码,也不会对 ...
js符号转码_JS 字符串编码函数（解决URL特殊字符传递问题）：escape()、encodeURI()、encodeURIComponent()区别详解...
转:http://www.cnblogs.com/qiantuwuliang/archive/2009/07/19/1526687.html //该方法不会对 ASCII 字母和数字进行编码,也不会对 ...
php url传递加号,坑爹的URL编码-PHP正确处理URL中的加号(+)
问题背景接收客户端传入参数,base64解码失败,经过排查发现原因是参数上传前字符串中有+,但是PHP接收后,发现+变成了空格,导致base64解码失败. 测试验证访问一个测试的接口 /inter ...
java url json字符串_使用HttpClient将URL中的JSON查询字符串发送到Web服务(Java)
我有一个我建立的Web服务...我现在要做的是发送一个简单的请求,其中包含一个从Tapestry Web应用程序到该Web服务的json查询字符串.我四处搜索,大多数人都说使用Apache HttpC ...
python2字符串编码方式_一、基础部分-2.字符串编码
一.字符编码历史 1. ASCII 美国人搞了个ASCII码表,把123abcABC%$#(数字.字母.特殊符号) ,全部用10进制的数字表示.例如数字65,代表着"A" ,ASC ...
URL中关于空格的编码转换成＋或转换成％20的问题
https://www.jianshu.com/p/4a7eb969235d 本人Android开发,某一天,被告知自己程序URL的编码中,空格被转换成了+,导致对方识别不成空格.当然我清楚的记得我是 ...
小程序 url 对象转字符串编码传参 url 字符串转对象解码接收参数
url 对象转字符串编码传参 let info = encodeURI(JSON.stringify(this.data.info));wx.navigateTo({url: '/pages/part ...
String字符串编码解码格式
https://blog.csdn.net/qq_35241080/article/details/83001149 //2 如何识别字符串编码 public static String getEnc ...

前端encodeURI , decodeURI对字符串编码解码 , 以及把url中的%0A %20解码成换行和空格

一 , 对字符串进行编码

控制台打印

二 , 对字符串进行解码

控制台打印

三 , 当url中出现 %0A , %20 这种元字符时 , 也可以用decodeURI进行解码 , 可以还原字符串原本的含义 , 比如 %0A是换行 , %20是空格

代码

控制台打印 (换行和空格显示出来了)

代码

页面

代码

页面

前端encodeURI , decodeURI对字符串编码解码 , 以及把url中的%0A %20解码成换行和空格相关推荐

最新文章

热门文章