Javascript에서 특수 문자를 HTML로 변환

아무도 특수 문자를 HTMLin 으로 변환하는 방법을 알고 Javascript있습니까?

예:

• &(앰퍼샌드)는 &amp.
• "(큰 따옴표)가 설정되지 않은 &quot경우 ENT_NOQUOTES가됩니다.
• '(작은 따옴표)가 설정된 &#039경우에만됩니다 ENT_QUOTES.
• <(보다 작음)은 &lt.
• >(보다 큼)은 &gt.

다음과 같은 기능이 필요합니다.

return mystring.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");

그러나 작은 따옴표 / 이중 따옴표를 다르게 처리하려는 귀하의 욕구를 고려하십시오.

제 생각에 가장 좋은 방법은 브라우저에 내장 된 HTML 이스케이프 기능을 사용하여 많은 경우를 처리하는 것입니다. 이렇게하려면 DOM 트리에 요소를 만들고 innerText해당 요소를 문자열로 설정하면 됩니다. 그런 다음 innerHTML요소를 검색합니다 . 브라우저는 HTML로 인코딩 된 문자열을 반환합니다.

function HtmlEncode(s)
{
  var el = document.createElement("div");
  el.innerText = el.textContent = s;
  s = el.innerHTML;
  return s;
}

테스트 실행 :

alert(HtmlEncode('&;\'><"'));

산출:

&;'><"

이 HTML 이스케이프 방법은 내가 제공 한 단순한 샘플과는 다르지만 Prototype JS 라이브러리 에서도 사용됩니다 .

참고 : 여전히 따옴표 (이중 및 단일)를 직접 이스케이프해야합니다. 여기에서 다른 사람이 설명한 방법을 사용할 수 있습니다.

이 일반 함수는 알파벳이 아닌 모든 문자를 htmlcode (숫자)로 인코딩합니다.

function HTMLEncode(str) {
    var i = str.length,
        aRet = [];

    while (i--) {
        var iC = str[i].charCodeAt();
        if (iC < 65 || iC > 127 || (iC>90 && iC<97)) {
            aRet[i] = '&#'+iC+';';
        } else {
            aRet[i] = str[i];
        }
    }
    return aRet.join('');
}

Mozilla에서 ...

charCodeAt은 항상 65,536보다 작은 값을 반환합니다. 이는 높은 코드 포인트가 실제 문자를 구성하는 데 사용되는 한 쌍의 (낮은 값) "대리"의사 문자로 표시되기 때문입니다. 이로 인해 65,536 이상의 개별 문자에 대한 전체 문자를 검사하거나 재현하려면 이러한 문자에 대해 charCodeAt (i)뿐만 아니라 charCodeAt (i + 1)도 검색해야합니다. / 문자 두 개가있는 문자열 재생산).

최고의 솔루션

/**
 * (c) 2012 Steven Levithan <http://slevithan.com/>
 * MIT license
 */
if (!String.prototype.codePointAt) {
    String.prototype.codePointAt = function (pos) {
        pos = isNaN(pos) ? 0 : pos;
        var str = String(this),
            code = str.charCodeAt(pos),
            next = str.charCodeAt(pos + 1);
        // If a surrogate pair
        if (0xD800 <= code && code <= 0xDBFF && 0xDC00 <= next && next <= 0xDFFF) {
            return ((code - 0xD800) * 0x400) + (next - 0xDC00) + 0x10000;
        }
        return code;
    };
}

/**
 * Encodes special html characters
 * @param string
 * @return {*}
 */
function html_encode(string) {
    var ret_val = '';
    for (var i = 0; i < string.length; i++) { 
        if (string.codePointAt(i) > 127) {
            ret_val += '&#' + string.codePointAt(i) + ';';
        } else {
            ret_val += string.charAt(i);
        }
    }
    return ret_val;
}

사용 예 :

html_encode("✈");

문자열을 사용하는 함수 만들기 replace

function convert(str)
{
  str = str.replace(/&/g, "&");
  str = str.replace(/>/g, ">");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/"/g, "&quot;");
  str = str.replace(/'/g, "&#039;");
  return str;
}

문자열 내부 와 같이 정수 문자 코드 를 디코딩 하려는 &#xxx;경우 다음 함수를 사용하십시오.

function decodeHtmlCharCodes(str) { 
  return str.replace(/(&#(\d+);)/g, function(match, capture, charCode) {
    return String.fromCharCode(charCode);
  });
}

// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int’l reputation’!'));

ES6

const decodeHtmlCharCodes = str => 
  str.replace(/(&#(\d+);)/g, (match, capture, charCode) => 
    String.fromCharCode(charCode));

// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int’l reputation’!'));

function char_convert() {

    var chars = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","ü","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"]; 
    var codes = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","&#252","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"];

    for(x=0; x<chars.length; x++){
        for (i=0; i<arguments.length; i++){
            arguments[i].value = arguments[i].value.replace(chars[x], codes[x]);
        }
    }
 }

char_convert(this);

dragon가장 깨끗한 방법 으로 언급했듯이 jQuery:

function HtmlEncode(s) {
    return $('<div>').text(s).html();
}

function HtmlDecode(s) {
    return $('<div>').html(s).text();
}

function ConvChar (str) {
  c = { '<': '& lt;', '>': '& gt;', '&': '& amp;', ' "': '& quot;'," ' ":'& # 039; ',
       '#': '& # 035;' };
  return str.replace (/ [<&> ' "#] / g, function (s) {return c [s];});
}

alert (ConvChar ( '<- "-&-"->-<-\'-#-\ '->'));

결과:

& lt;- "-& amp;-"-& gt;-& lt;-& # 039;-& # 035;-& # 039;-& gt;

testarea 태그에서 :

<- "-&-"->-<-'- # -'->

긴 코드에서 약간의 문자 만 변경하면 ...

A의 PRE태그 - 그리고 대부분의 다른 HTML에서 사용하는 출력 재 지정 문자 (<및>) HTML을 중단하지만 것이라는 배치 파일을 일반 텍스트를 tags- 여기 나의 팁입니다 : 아무것도가 간다 TEXTAREA- 그것은이 휴식하지 않습니다 요소 HTML은 주로 우리가 OS에 의해 인스턴스화되고 처리되는 컨트롤 내부에 있기 때문에 그 내용이 HTML 엔진에 의해 구문 분석되지 않기 때문입니다.

예를 들어, javascript를 사용하여 배치 파일의 구문을 강조하고 싶다고 가정합니다. HTML 예약 문자에 대해 걱정하지 않고 텍스트 영역에 코드를 붙여 넣기 만하면 스크립트가innerHTML 가 해당 ISO-8859-1 엔티티로 대체 된 HTML 예약 문자가있는 텍스트로 평가되는 텍스트 영역 속성을 합니다.

요소 의 innerHTML(및 outerHTML) 속성을 검색하면 브라우저가 특수 문자를 자동으로 이스케이프 합니다. 텍스트 영역 (그리고 텍스트 유형의 입력을 아는 사람)을 사용하면 (수동으로 또는 코드를 통해) 변환을 수행하지 않아도됩니다.

이 트릭을 사용하여 구문 하이 라이터를 테스트하고 저작 및 테스트가 끝나면 텍스트 영역을보기에서 숨 깁니다.

표준화 된 모든 명명 된 문자 참조 , 유니 코드 및 모호한 앰퍼샌드에 대한 지원이 필요한 경우 는 그 라이브러리는 제가 알고있는 유일한 100 % 신뢰할 수있는 솔루션입니다!

사용 예

he.encode('foo © bar ≠ baz 𝌆 qux'); 
// Output : 'foo © bar ≠ baz 𝌆 qux'

he.decode('foo © bar ≠ baz 𝌆 qux');
// Output : 'foo © bar ≠ baz 𝌆 qux'

해결 방법 :

var temp = $("div").text("<");
var afterEscape = temp.html(); // afterEscape == "&lt;"

var swapCodes   = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 169, 61558, 8226, 61607);
var swapStrings = new Array("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "©", "•", "•", "•");

var TextCheck = {
    doCWBind:function(div){
        $(div).bind({
            bind:function(){
                TextCheck.cleanWord(div);
            },
            focus:function(){
                TextCheck.cleanWord(div);
            },
            paste:function(){
                TextCheck.cleanWord(div);
            }
        }); 
    },
    cleanWord:function(div){
        var output = $(div).val();
        for (i = 0; i < swapCodes.length; i++) {
            var swapper = new RegExp("\\u" + swapCodes[i].toString(16), "g");
            output = output.replace(swapper, swapStrings[i]);
        }
        $(div).val(output);
    }
}

우리가 지금 사용하는 또 다른 하나는 작동합니다. 위의 하나는 대신 스크립트를 호출하고 변환 된 코드를 반환합니다. 작은 텍스트 영역에서만 좋습니다 (기사 / 블로그 요법에서 전체가 아님을 의미합니다 ...)

위를 위해. 대부분의 문자에서 작동합니다.

var swapCodes   = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 61558, 8226, 61607,161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 338, 339, 352, 353, 376, 402);
var swapStrings = new Array("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "•", "•", "•", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "­", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Š", "š", "Ÿ", "ƒ");

위와 같은 기능이 많은 자바 스크립트 파일을 생성합니다. http://www.neotropicsolutions.com/JSChars.zip

필요한 모든 파일이 포함되어 있습니다. jQuery 1.4.4를 추가했습니다. 다른 버전에서 문제를 보았지만 아직 시도하지 않았기 때문입니다.

Requires: jQuery & jQuery Impromptu from: http://trentrichardson.com/Impromptu/index.php

1. Word Count
2. Character Conversion
3. Checks to ensure this is not passed: "notsomeverylongstringmissingspaces"
4. Checks to make sure ALL IS NOT ALL UPPERCASE.
5. Strip HTML

    // Word Counter
    $.getScript('js/characters.js',function(){
            $('#adtxt').bind("keyup click blur focus change paste",
                function(event){
                    TextCheck.wordCount(30, "#adtxt", "#adtxt_count", event);
            });
            $('#adtxt').blur(
                function(event){
                    TextCheck.check_length('#adtxt'); // unsures properly spaces-not one long word
                    TextCheck.doCWBind('#adtxt');// char conversion
            });

            TextCheck.wordCount(30, "#adtxt", "#adtxt_count", false);
        });

    //HTML
    <textarea name="adtxt" id="adtxt" rows="10" cols="70" class="wordCount"></textarea>
<div id="adtxt_count" class="clear"></div>

    // Just Character Conversions:
    TextCheck.doCWBind('#myfield');

    // Run through form fields in a form for case checking.
    // Alerts user when field is blur'd.
    var labels = new Array("Brief Description","Website URL","Contact Name","Website","Email","Linkback URL");
    var checking = new Array("descr","title","fname","website","email","linkback");
    TextCheck.check_it(checking,labels);

    // Extra security to check again, make sure form is not submitted
    var pass = TextCheck.validate(checking,labels);
    if(pass){
        //do form actions
    }


    //Strip HTML
    <textarea name="adtxt" id="adtxt" rows="10" cols="70" onblur="TextCheck.stripHTML(this);"></textarea>

 <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>html</title>  
      <script>
      $(function() {   
      document.getElementById('test').innerHTML = "&amp;";
      });

      </script>
    </head>
    <body>
    <div id="test"></div>
    </body>
    </html>

위의 코드를 사용하여 특수 문자를 html로 간단히 변환 할 수 있습니다.

이 맥락에서 매우 유용하다고 생각한 좋은 라이브러리가 있습니다.

https://github.com/mathiasbynens/he

저자에 따르면 :

HTML에 따라 모든 표준화 된 명명 된 문자 참조를 지원하고, 브라우저처럼 모호한 앰퍼샌드 및 기타 엣지 케이스를 처리하고, 광범위한 테스트 스위트를 가지고 있으며, 다른 많은 JavaScript 솔루션과 달리 아스트랄 유니 코드 기호를 잘 처리합니다.

다음은 Jquery없이 사용하는 몇 가지 방법입니다.

문자열의 모든 문자 를 인코딩 할 수 있습니다 .

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

또는 다음 과 같이 걱정할 주요 안전 인코딩 문자 (&, inebreaks, <,>, "및 ')를 대상으로 지정하십시오.

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55">www.WHAK.com</textarea>

function escape (text)
{
  return text.replace(/[<>\&\"\']/g, function(c) {
    return '&#' + c.charCodeAt(0) + ';';
  });
}

alert(escape("<>&'\""));

이것은 귀하의 질문에 직접 대답하지 않지만 innerHTML요소 내에서 텍스트를 작성하기 위해 사용 하고 인코딩 문제가 발생한 경우 다음을 사용하십시오 textContent.

var s = "Foo 'bar' baz <qux>";

var element = document.getElementById('foo');
element.textContent = s;

// <div id="foo">Foo 'bar' baz <qux></div>

DOMParser특수 문자 변환을 위해 javascript 를 사용할 수 있습니다 .

const parser = new DOMParser();
const convertedValue = (parser.parseFromString("&#039 &amp &#039 &lt &gt", "application/xml").body.innerText;

다음은 JS에서 xml 이스케이프 문자를 인코딩하는 간단한 기능입니다.

Encoder.htmlEncode (unsafeText);

.text () 함수를 .html ()로 바꾸면 문제를 해결할 수 있습니다. 그것은 나를 위해 일하고 있습니다.

<html>
<body>
<script type="text/javascript">
var str= "&\"'<>";
alert('B4 Change:\n' + str);
str= str.replace(/\&/g,'&amp;');
str= str.replace(/</g,'&lt;');
str= str.replace(/>/g,'&gt;');
str= str.replace(/\"/g,'&quot;');
str= str.replace(/\'/g,'&#039;');
alert('After change:\n' + str);
</script>
</body>
</html>      

이것을 사용하여 테스트하십시오 : http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

예,하지만 결과 문자열을 다시 변환하지 않고 어딘가에 삽입해야하는 경우 다음을 수행해야합니다.

str.replace(/'/g,"'"); // and so on

JavaScript htmlentities http://phpjs.org/functions/htmlentities:425 참조

문자열을 인코딩 할 수 있는 javaScript 함수 escape () 를 사용하십시오.

예 :

escape("yourString");

public static string HtmlEncode (string text)
{
    string result;
    using (StringWriter sw = new StringWriter())
    {
        var x = new HtmlTextWriter(sw);
        x.WriteEncodedText(text);
        result = sw.ToString();
    }
    return result;

}