×

JavaScript:使用escape()、encodeURI()和decodeURI()实现URI编码

作者:Terry2023.01.25来源:Web前端之家浏览:221评论:0
关键词:js

JavaScript:使用escape()、encodeURI()和decodeURI()实现URI编码。

一、URI编码解码

1、编解码一个字符串(淘汰)

ECMAScript v3 反对使用该方法,应使用 decodeURI() 和 decodeURIComponent() 替代它。

escape():编码一个字符串

escape()除了 ASCII 字母、数字和特定的符号外,对传进来的字符串全部进行转义编码。

语法:escape(value);

var str = "javascript 你好";
var str1 = escape(str);
document.write(str1);  //输出:javascript%20%u4F60%u597D

unecape():解码一个由escape()函数编码的字符串

var str = "javascript 你好";
var str1 = escape(str);
document.write(str1); //javascript%20%u4F60%u597D
var str2 = unescape(str1);
alert(str2); //弹出 javascript你好

2、编解码一个URI

encodeURI():转义一个URI中的字符

encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。

语法:encodeURI(uri) 这个在编码不同的AJAX请求时,解决中文乱码问题经常用到。

var str1 = "你好javascript";
var str2 = encodeURI(str1);
document.write(str2);   //输出:%E4%BD%A0%E5%A5%BDjavascript

decodeURI():解码一个URI中的字符

语法:decodeURI(uri)

var str1 = "你好javascript";
var str2 = encodeURI(str1);
document.write(str2);   //输出:%E4%BD%A0%E5%A5%BDjavascript
var str3 = decodeURI(str2);
document.write("
" + str3)  //输出:你好javascript

编解码一个URI组件

encodeURIComponent():转义URI组件中的字符

encodeURIComponent方法在编码单个URIComponent(指请求参数)应当是最常用的,它可以讲参数中的中文、特殊字符进行转义,而不会影响整个URL。

var str1 = "你好javascript";
var str2 = encodeURIComponent(str1);
document.write(str2);   //输出:%E4%BD%A0%E5%A5%BDjavascript

decodeURIComponent():解码一个URI组件中的字符

var str1 = "你好javascript";
var str2 = encodeURIComponent(str1);
document.write(str2);   //输出:%E4%BD%A0%E5%A5%BDjavascript
var str3 = decodeURIComponent(str2);
document.write("
" + str3)  //输出:你好javascript

二、html编码解码

html编码解码函数

编码函数:

function htmlEncode(str) {  
         var s = "";  
         if (str.length == 0) return "";  
         s = str.replace(/&/g, "&");  
         s = s.replace(/</g, "&lt;");  
         s = s.replace(/>/g, "&gt;");    
         s = s.replace(/'/g, "&apos;");  
         s = s.replace(/"/g, "&quot;");  
         return s;  
    }  ;

解码函数:

function htmlDecode(str){     
        var s = "";     
        if (str.length == 0) return "";  
        s = str.replace(/&amp;/g, "&");  
        s = s.replace(/&lt;/g, "<");  
        s = s.replace(/&gt;/g, ">");   
        s = s.replace(/&apos;/g, "'");     
        s = s.replace(/&quot;/g, "\"");   
        return s;     
    }

用浏览器内部转换器实现

实现html转码

htmlEncode:function (html){
    //1.首先动态创建一个容器标签元素,如DIV
    var temp = document.createElement ("div");
    //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)
    (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
    //3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了
    var output = temp.innerHTML;
    temp = null;
    return output;
 }

实现html解码

htmlDecode:function (text){
     //1.首先动态创建一个容器标签元素,如DIV
     var temp = document.createElement("div");
     //2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)
     temp.innerHTML = text;
     //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。
    var output = temp.innerText || temp.textContent;
     temp = null;
     return output;
 },


您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20230125a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • jianj

    node看上有点复杂...

  • 访客

    正好遇到,谢谢分享...

  • jimmy

    这个很有趣,国内SEO更多的是百度...

  • jenny

    VUE的总结的不错啊,收藏了。下次搞点React的啊...

  • jenny

    win7最经典,想当初win8出来后都没它好用,怀恋经典。。。...

  • Terry

    谢谢提醒,插件已经修复。...

  • 访客

    士大夫士大夫...

  • 访客

    用這甚麼顏色...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2