JavaScriptで特殊文字をHTMLに変換する

特殊文字をHTMLに変換する方法を知っている人はい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）も取得する必要があります（ / 2つの文字で文字列を再生成する>）。

最良のソリューション

/**
 * (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;-＆quot;-＆amp;-＆quot;-＆gt;-＆lt;-＆＃039;-＆＃035;-＆＃039;-＆gt;

testareaタグ内：

<-"-＆-"->-<-'-＃-'->

長いコードで小さな文字を変更するだけなら...

ではPRE、タグ-そして他のほとんどのHTMLに出力リダイレクト文字（<と>）を使用したバッチファイルのプレーンテキストをtags- HTMLを破るであろうが、ここに私のヒントです：何でもに行くTEXTAREA-itが中断されません要素HTMLの主な理由は、OSによってインスタンス化および処理されるコントロール内にいるため、そのコンテンツがHTMLエンジンによって解析されていないためです。

例として、JavaScriptを使用してバッチファイルの構文を強調表示したいとします。HTMLの予約文字を気にせずにコードをtextareaに貼り付け、innerHTMLHTMLの予約文字を対応するISO-8859-1エンティティで置き換えたテキストに評価されるtextarea のプロパティをスクリプトに処理させます。

要素のinnerHTML（およびouterHTML）プロパティを取得すると、ブラウザは自動的に特殊文字をエスケープします。textareaを使用すると（そして、テキストタイプの入力を知っている人は）、変換を（手動でまたはコードを介して）行う必要がなくなります。

このトリックを使用して構文ハイライターをテストし、オーサリングとテストが完了したら、textareaを非表示にします。

すべての標準化された名前付き文字参照、Unicode、あいまいなアンパサンドのサポートが必要な場合、彼のライブラリは、私が知っている唯一の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);
    }
}

現在使用しているもう1つの方法は機能します。上記の1つでは、代わりにスクリプトを呼び出して、変換されたコードを返します。小さなテキストエリアでのみ有効（記事/ブログなどで完全ではない...）

上記のため。ほとんどの文字で動作します。

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("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "•", "•", "•", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "­", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Š", "š", "Ÿ", "ƒ");

上記を含む多くの機能を備えたJavaScriptファイルを作成します。 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ソリューションとは対照的に、アストラルUnicodeシンボルを適切に処理します。

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;

}