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原创，转载请注明出处并保留原文链接）