lena和shane,家庭日志,xulavigne,Lena&Shane

如何实现

在js中使用htmlEncode和htmlDecode

2015-11-04 beyondweb.cn Walker Shane Jhu

html的encode以及decode也是在开发中经常遇到的事情,比如针对表单的处理,当用户输入的内容包含html标签时,为了安全起见,提交到后台之前需要进行encode处理,即把类似<div>的内容转义为<div>。

下面就来具体看一下如何实现html的encode以及decode,这里将分别用html dom、js正则匹配、jquery这三种方法实现。


1、通过html dom实现

这里主要是通过document对象创建元素,然后把需要操作的字符串以不同的方式“写进”元素内,最后再通过innerHTML或者textContent(innerText)方法获取处理后的字符串。(注意textContent与innerText的区别)

function htmlEncode ( str ) {
    var ele = document.createElement('span');
    ele.appendChild( document.createTextNode( str ) );
    return ele.innerHTML;
}

function htmlDecode ( str ) {
    var ele = document.createElement('span');
    ele.innerHTML = str;
    return ele.textContent || ele.innerText;
}


2、js正则匹配实现

在处理的过程中通过replace方法来对标签及html实体进行互相替换。

function htmlEncode ( str ) {
    var _str = '';
    if ( str.length == 0 ) return '';
    _str = str .replace(/&/g, '&');
    _str = _str.replace(//g, '>');

    return _str;
}

function htmlDecode ( str ) {
    var _str = '';
    if ( str.length == 0 ) return '';
    _str = str .replace(/&/g, '&');
    _str = _str.replace(/</g, '<');
    _str = _str.replace(/>/g, '>');
    _str = _str .replace(/"/g, '"');

    return _str;
}

 

3、通过jQuery内置的html()方法及text()方法实现

这里实现起来就很简单了,如decode:通过$(‘<span/>’)创建标签,然后再把需要处理的字符串通过html()方法“写进”span元素中,最后再用text()获取就得到了decode后的内容。

function htmlEncodeJQ ( str ) {
    return $('').text( str ).html();
}

function htmlDecodeJQ ( str ) {
    return $('').html( str ).text();
}

(本文由BeyondWeb.cn原创,转载请注明出处并保留原文链接

如果觉得文章还不错,请点个赞吧

8月 30 2020
太过信任,你或许会受骗,然而终日怀疑,你会饱受痛苦。

弗兰克•克莱恩 (Frank Crane 美国演员,导演)