js处理html的encode以及decode


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();
}

ok,以上就是html的encode以及decode的相关内容,源代码在这里


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>