Einzelne/doppelte Anführungszeichen dürfen in HTML-Attribut-Werte?

Ich versuche mit Attribut-Wert enthält ein einzelnes Zitat:

var attr_value = "It's not working";
var html = "<label my_attr='" + attr_value + "'>Text</label>";
$('body').html(html);

Allerdings bekomme ich das folgende Ergebnis:

<label working="" not="" s="" my_attr="It">Text</label>

Wie könnte ich dieses Problem beheben ?

Sind Anführungszeichen erlaubt, innerhalb Attribut-Werte ?

InformationsquelleAutor Misha Moroshko | 2010-10-22

  1. 20

    Ja, beide Zitate sind nicht erlaubt Attribut-Werte, aber Sie müssen HTML-escape-das Zitat, das Sie verwenden, wie ein Attribut-Wert-Trennzeichen, sowie andere HTML-Sonderzeichen wie < und &:

    function encodeHTML(s) {
    return s.split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;').split("'").join('&#39;');
}

var html= '<label my_attr="'+encodeHTML(attr_value)+'">Text</label>';

    Jedoch, Sie sind in der Regel viel besser nicht versucht zu hacken ein Dokument gemeinsam von HTML-strings. Riskieren Sie Fehler-und HTML-injection (führt zu cross-site-scripting-Sicherheitslücken) jedes mal, wenn Sie vergessen, um zu entkommen. Verwenden Sie stattdessen die DOM-Stil Methoden wie attr(), text() und die Bau-Verknüpfung:

    $('body').append(
    $('<label>', {my_attr: attr_value, text: 'Text'})
);
    Vielen Dank für eine ausführliche Antwort! Nur aus Neugier, bei der Umsetzung von encodeHTML: Es kann implementiert werden unter Verwendung der replace Funktion, richtig ? Ist es weniger wirksam ?
    Es kann, sicher, replace(/&/g, '&amp;').... In diesem Fall ist es egal, da die such-strings nicht enthalten keine regex-Sonderzeichen, aber im Allgemeinen aus einfachen string-ersetzen split/join kann einfacher sein, da können Sie suchen von Zeichenfolgen ohne sorgen über die regex-zu entkommen. Vergleichende Leistung variiert zwischen den Browsern.
    Danke ! Könnten Sie mir einen Zeiger auf "Bau-Verknüpfung" - tutorial ?
    Siehe z.B. milesj.me/blog/read/77/Element-Erstellung-In-JQuery-1.4
    Als ein Beispiel von @bobince Punkt, dass Sie sollten nicht hack ein Dokument gemeinsam von HTML-strings: der backtick-Zeichen `` (ist nicht in der encodeHTML - Funktion) kann verwendet werden, um Flucht aus einer unquoted Attribut-Wert im IE. Aus diesem Grund, es wurde ungültig gemacht, um die Verwendung des backtick-Zeichen in einem Attribut-Wert pro "HTML5".

    InformationsquelleAutor bobince

  2. 12

    Können Sie verwenden Sie einfache Anführungszeichen innerhalb von doppelten Anführungszeichen oder doppelte Anführungszeichen innerhalb von einfachen Anführungszeichen. Wenn Sie möchten, verwenden Sie einfache Anführungszeichen innerhalb von einfachen Anführungszeichen oder doppelte Anführungszeichen innerhalb von doppelten Anführungszeichen stehen, müssen Sie HTML-Kodieren.

    Gültig markup: 

    <label attr="This 'works'!" />
<label attr='This "works" too' />
<label attr="This does NOT \"work\"" />
<label attr="And this is &quot;OK&quot;, too" />
    Das mit den backslashes funktioniert nicht. Das ist ein JavaScript-escape, keine HTML.
    Sie haben Recht, ich bearbeitet meine Reaktion und nahm die Flucht.
    Ihr habt nur vergessen, die schließende " im <label attr="And this is &quot;OK&quot;, too /> oder bin ich da falsch?
    Sie hatten Recht, ich habe es behoben, danke für den Hinweis it out.

    InformationsquelleAutor CodeTwice

  3. 4

    Verwenden Sie doppelte Anführungszeichen als Attribut-delimiter:

    var html = "<label my_attr=\"" + attr_value + "\">Text</label>";

    InformationsquelleAutor Marcelo Cantos

  4. 3
    var attr_value = "It&#39;s not working"

    InformationsquelleAutor Marco Mariani

Schreibe einen Kommentar