javascript 처리 HTML 의 Encode (디 코딩) 와 Decode (디 코딩) 총 결

HTML 의 엔 코드 (디 코딩) 와 디 코딩 (Decode) 은 평소 개발 에서 도 자주 처리 되 는데, 여기 서 자 바스 크 립 트 를 사용 하여 HTML 의 엔 코드 (디 코딩) 와 디 코딩 (Decode) 을 처리 하 는 데 자주 사용 되 는 방식 을 총 결 하 였 다.
1. 브 라 우 저 내부 변환기 로 전환
1.1. 브 라 우 저 내부 변환기 로 html 디 코딩 실현
먼저 DIV 와 같은 용기 태그 요 소 를 동적 으로 만 든 다음 변환 할 문자열 을 이 요소 의 innerText (ie 지원) 나 textContent (불 여우, google 지원) 로 설정 하고 마지막 으로 이 요소 의 innerHTML 을 되 돌려 줍 니 다. 즉, HTML 인 코딩 을 통 해 변 환 된 문자열 을 얻 을 수 있 습 니 다.
1.2. 브 라 우 저 내부 변환기 로 html 디 코딩 실현
먼저 DIV 와 같은 용기 태그 요 소 를 동적 으로 만 든 다음 에 변환 할 문자열 을 이 요소 의 innerHTML (ie, 불 여우, google 모두 지원) 로 설정 하고 마지막 으로 이 요소 의 innerText (ie 지원) 나 textContent (불 여우, google 지원) 를 되 돌려 줍 니 다. 즉, HTML 디 코딩 을 거 친 문자열 을 얻 을 수 있 습 니 다.
1.3. 구체 적 인 실현 코드

 1 var HtmlUtil = {
 2     /*1.           html  */
 3     htmlEncode:function (html){
 4         //1.              ， DIV
 5         var temp = document.createElement ("div");
 6         //2.                  innerText(ie  )  textContent(  ，google  )
 7         (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
 8         //3.         innerHTML，     HTML         
 9         var output = temp.innerHTML;
10         temp = null;
11         return output;
12     },
13     /*2.           html  */
14     htmlDecode:function (text){
15         //1.              ， DIV
16         var temp = document.createElement("div");
17         //2.                  innerHTML(ie，  ，google   )
18         temp.innerHTML = text;
19         //3.         innerText(ie  )  textContent(  ，google  )，     HTML       。
20         var output = temp.innerText || temp.textContent;
21         temp = null;
22         return output;
23     }
24 };

테스트:

1 var html = "
aaaaaa
bbbb
";
2 var encodeHtml = HtmlUtil.htmlEncode(html);
3 alert("encodeHtml：" + encodeHtml);
4 var decodeHtml = HtmlUtil.htmlDecode(encodeHtml);
5 alert("decodeHtml：" + decodeHtml);

실행 결과:
　　
 2. 정규 표현 식 으로 변환 처리
정규 표현 식 을 사용 하 는 것 도 자주 사용 하 는 처리 방식 입 니 다. 실현 원 리 는 바로 교체 방식 으로 디 코딩 과 디 코딩 을 실현 하 는 것 입 니 다. 디 코딩 할 때 < >, 스페이스 바, &, ',' html 인 코딩 으로 바 꾸 면 디 코딩 은 html 인 코딩 을 대응 하 는 문자 로 바 꾸 고 코드 는 다음 과 같 습 니 다.

 1 var HtmlUtil = {
 2     /*1.        html  */
 3     htmlEncodeByRegExp:function (str){  
 4          var s = "";
 5          if(str.length == 0) return "";
 6          s = str.replace(/&/g,"&");
 7          s = s.replace(/);
 8          s = s.replace(/>/g,">");
 9          s = s.replace(/ /g," ");
10          s = s.replace(/\'/g,"'");
11          s = s.replace(/\"/g,""");
12          return s;  
13    },
14    /*2.        html  */
15    htmlDecodeByRegExp:function (str){  
16          var s = "";
17          if(str.length == 0) return "";
18          s = str.replace(/&/g,"&");
19          s = s.replace(/</g,");
20          s = s.replace(/>/g,">");
21          s = s.replace(/ /g," ");
22          s = s.replace(/'/g,"\'");
23          s = s.replace(/"/g,"\"");
24          return s;  
25    }
26 };

테스트 코드:

1 var html = "
ccccc
aaaaa
";
2 var encodeHTML = HtmlUtil.htmlEncodeByRegExp(html);
3 alert("        html  ，encodeHTML：" + encodeHTML);
4 var decodeHTML = HtmlUtil.htmlDecodeByRegExp("        html  ：" + encodeHTML);
5 alert(decodeHTML);

테스트 결과:
　　
3. HtmlUtil 공구 류 패키지
두 가지 방식 으로 HtmlUtil 도구 류 를 밀봉 하여 개발 에 편리 하 게 사용 할 수 있 습 니 다. 전체 코드 는 다음 과 같 습 니 다.

 1 var HtmlUtil = {
 2     /*1.           html  */
 3     htmlEncode:function (html){
 4         //1.              ， DIV
 5         var temp = document.createElement ("div");
 6         //2.                  innerText(ie  )  textContent(  ，google  )
 7         (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
 8         //3.         innerHTML，     HTML         
 9         var output = temp.innerHTML;
10         temp = null;
11         return output;
12     },
13     /*2.           html  */
14     htmlDecode:function (text){
15         //1.              ， DIV
16         var temp = document.createElement("div");
17         //2.                  innerHTML(ie，  ，google   )
18         temp.innerHTML = text;
19         //3.         innerText(ie  )  textContent(  ，google  )，     HTML       。
20         var output = temp.innerText || temp.textContent;
21         temp = null;
22         return output;
23     },
24     /*3.        html  */
25     htmlEncodeByRegExp:function (str){  
26          var s = "";
27          if(str.length == 0) return "";
28          s = str.replace(/&/g,"&");
29          s = s.replace(/);
30          s = s.replace(/>/g,">");
31          s = s.replace(/ /g," ");
32          s = s.replace(/\'/g,"'");
33          s = s.replace(/\"/g,""");
34          return s;  
35    },
36    /*4.        html  */
37    htmlDecodeByRegExp:function (str){  
38          var s = "";
39          if(str.length == 0) return "";
40          s = str.replace(/&/g,"&");
41          s = s.replace(/</g,");
42          s = s.replace(/>/g,">");
43          s = s.replace(/ /g," ");
44          s = s.replace(/'/g,"\'");
45          s = s.replace(/"/g,"\"");
46          return s;  
47    }
48 };