Konvertieren Sie Sonderzeichen in Javascript in HTML

Weiß jemand, wie man Sonderzeichen in HTMLin konvertiert?Javascript ?

Beispiel:

• &(kaufmännisches Und) wird &amp.
• "(doppeltes Anführungszeichen) wird, &quotwenn ENT_NOQUOTESnicht gesetzt ist.
• '(einfaches Anführungszeichen) wird &#039nur, wenn ENT_QUOTESgesetzt ist.
• <(weniger als) wird &lt.
• >(größer als) wird &gt.

Sie benötigen eine Funktion, die so etwas wie

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

Berücksichtigen Sie jedoch Ihren Wunsch nach einem unterschiedlichen Umgang mit einfachen / doppelten Anführungszeichen.

Meiner Meinung nach ist es am besten, die integrierte HTML-Escape-Funktion des Browsers zu verwenden, um viele Fälle zu behandeln. Erstellen Sie dazu einfach ein Element im DOM-Baum und setzen Sie innerTextdas Element auf Ihre Zeichenfolge. Rufen Sie dann innerHTMLdas Element ab. Der Browser gibt eine HTML-codierte Zeichenfolge zurück.

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

Testlauf:

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

Ausgabe:

&;'><"

Diese Methode zum Escapen von HTML wird auch von der Prototype JS-Bibliothek verwendet, unterscheidet sich jedoch von dem vereinfachten Beispiel, das ich gegeben habe.

Hinweis: Sie müssen Anführungszeichen (doppelt und einfach) weiterhin selbst umgehen. Sie können jede der von anderen hier beschriebenen Methoden verwenden.

Diese generische Funktion codiert jedes nicht alphabetische Zeichen in seinen HTML-Code (numerisch):

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

Von Mozilla ...

Beachten Sie, dass charCodeAt immer einen Wert zurückgibt, der kleiner als 65.536 ist. Dies liegt daran, dass die höheren Codepunkte durch ein Paar (niedrigerwertiger) "Ersatz" -Pseudozeichen dargestellt werden, die verwendet werden, um das reale Zeichen zu umfassen. Aus diesem Grund ist es erforderlich, nicht nur charCodeAt (i), sondern auch charCodeAt (i + 1) abzurufen, um das vollständige Zeichen für einzelne Zeichen mit einem Wert von 65.536 und höher zu untersuchen oder zu reproduzieren / Wiedergabe einer Zeichenfolge mit zwei> Buchstaben).

Die beste Lösung

/**
 * (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;
}

Anwendungsbeispiel:

html_encode("✈");

Erstellen Sie eine Funktion, die einen String verwendet 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;
}

Verwenden Sie diese Funktion für diejenigen, die einen ganzzahligen Zeichencode wie in einer Zeichenfolge dekodieren möchten &#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);

Wie dragonam saubersten erwähnt wurde , ist dies mit jQuery:

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

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

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

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

Ergebnis:

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

Im Testbereich:

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

Wenn Sie nur ein paar Zeichen in langem Code ändern ...

In einem PRETag - und in den meisten anderen HTML-Tags - wird durch einfachen Text für eine Batchdatei, die die Ausgabeumleitungszeichen (<und>) verwendet, der HTML-Code unterbrochen. Hier ist jedoch mein Tipp : Alles, was in einem TEXTAREAElement enthalten ist, unterbricht den HTML-Code nicht HTML, hauptsächlich, weil wir uns in einem Steuerelement befinden, das vom Betriebssystem instanziiert und verwaltet wird, und daher sein Inhalt nicht von der HTML-Engine analysiert wird.

Angenommen, ich möchte die Syntax meiner Batchdatei mit Javascript hervorheben. Ich füge den Code einfach in einen Textbereich ein, ohne mir Gedanken über die HTML-reservierten Zeichen zu machen, und lasse das Skript das verarbeiteninnerHTML Eigenschaft des Textbereichs verarbeiten, der den Text auswertet, wobei die reservierten HTML-Zeichen durch die entsprechenden ISO-8859-1-Entitäten ersetzt werden.

Browser entkommen Sonderzeichen automatisch, wenn Sie die innerHTML(und outerHTML) -Eigenschaft eines Elements abrufen . Die Verwendung eines Textbereichs (und wer weiß, möglicherweise eine Eingabe vom Typ Text) erspart Ihnen nur die Konvertierung (manuell oder über Code).

Ich benutze diesen Trick, um meinen Syntax-Textmarker zu testen. Wenn ich mit dem Erstellen und Testen fertig bin, verstecke ich den Textbereich einfach vor der Ansicht.

Wenn Sie Unterstützung für alle standardisierten Referenzen für benannte Zeichen , Unicode und mehrdeutige kaufmännische Und- Zeichen benötigen , ist die he- Bibliothek die einzige 100% zuverlässige Lösung, die mir bekannt ist!

Beispiel Verwendung

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

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

eine Problemumgehung:

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

Eine andere, die wir jetzt verwenden, funktioniert. Eines oben hat es stattdessen ein Skript aufgerufen und gibt den konvertierten Code zurück. Nur gut für kleine Textbereiche (dh nicht vollständig für Artikel / Blog usw.)

Für oben. Funktioniert mit den meisten Zeichen.

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

Ich erstelle eine Javascript-Datei, die viele Funktionen hat, einschließlich der oben genannten. http://www.neotropicsolutions.com/JSChars.zip

Alle benötigten Dateien sind enthalten. Ich habe jQuery 1.4.4 hinzugefügt. Einfach, weil ich Probleme in anderen Versionen gesehen habe, sie aber noch nicht ausprobiert habe.

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>

Sie können Sonderzeichen einfach mit dem obigen Code in HTML konvertieren.

Hier ist eine gute Bibliothek, die ich in diesem Zusammenhang als sehr nützlich empfunden habe.

https://github.com/mathiasbynens/he

Laut dem Autor:

Es unterstützt alle standardisierten benannten Zeichenreferenzen gemäß HTML, behandelt mehrdeutige kaufmännische Und-Zeichen und andere Randfälle wie ein Browser, verfügt über eine umfangreiche Testsuite und verarbeitet - im Gegensatz zu vielen anderen JavaScript-Lösungen - astrale Unicode-Symbole einwandfrei

Hier sind einige Methoden, die ich ohne Jquery verwende:

Sie können jedes Zeichen in Ihrer Zeichenfolge codieren :

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

Oder zielen Sie einfach auf die wichtigsten sicheren Codierungszeichen ab, um die Sie sich Sorgen machen müssen (&, Inebreaks, <,>, "und '), wie:

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("<>&'\""));

Dies beantwortet Ihre Frage nicht direkt. Wenn Sie jedoch innerHTMLText in ein Element schreiben und dabei auf Codierungsprobleme stoßen, verwenden Sie einfach textContent:

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

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

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

Wir können Javascript DOMParserfür die Konvertierung von Sonderzeichen verwenden.

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

Im Folgenden finden Sie die einfache Funktion zum Codieren von XML-Escapezeichen in JS

Encoder.htmlEncode (unsafeText);

Sie können das Problem beheben, indem Sie die Funktion .text () durch .html () ersetzen. Es funktioniert für mich.

<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>      

Verwenden Sie dies zum Testen: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

Ja, aber wenn Sie die resultierende Zeichenfolge irgendwo einfügen müssen, ohne dass sie zurückkonvertiert wird, müssen Sie Folgendes tun:

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

Siehe JavaScript htmlentities http://phpjs.org/functions/htmlentities:425

Verwenden Sie die JavaScript-Funktion Escape () , mit der Sie Zeichenfolgen codieren können.

z.B,

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;

}