Escape-Anführungszeichen in HTML5-Datenattributen mit Javascript

Question 1

Ich verwende jQuery .data() um mit benutzerdefinierten HTML5-Datenattributen zu arbeiten, bei denen der Wert des Attributs sowohl einfache als auch doppelte Anführungszeichen enthalten muss:

<p class="example" data-example="She said "WTF" on last night's show.">

Ich kenne die Verwendung von Zeichencodes wie " im Datenattributwert könnte das obige funktionieren, aber ich kann nicht immer kontrollieren, wie die Werte eingegeben werden. Außerdem muss ich in der Lage sein, HTML-Tags wie folgt im Markup zu verwenden:

<p class="example" data-example="
She said "<abbr title="What The F***">WTF</abbr>" on last night's show.
">

Wenn irgendeine Form von .replace() ist die Antwort, dann muss es getan werden, bevor der Wert gelesen wird .data()– vielleicht indem man es über die gesamte Fläche anwendet <body>?

Normaler Backslash mit Escapezeichen wie <abbr title="te\'st">WTF</abbr> geht auch nicht.

Idealerweise hätte dies die Flexibilität, mit beiden zu arbeiten:

data-example="..."

und
data-example="..."

Aber wenn es nur in eine Richtung geht, dann könnte ich zumindest damit rollen. Ideen?

Aktualisieren – etwas mehr Kontext:

Ich arbeite daran für responsejs.com. Eine tatsächliche Anwendung davon könnte darin bestehen, eine Seitenleiste nur für Browser über einer bestimmten Breite zu laden (und dies im Browser und nicht in PHP handhaben zu lassen). Im Fall von WordPress könnte die Seitenleiste beispielsweise Widgets, Bilder usw. enthalten. Die Anführungszeichen in PHP-Tags sind kein Problem, da sie in HTML geparst werden, bevor sie zum Browser gelangen. Beispiel:

<aside id="primary" class="sidebar" 

        data-oweb=' 

            <?php dynamic_sidebar( 'primary' ); ?>

        '
    >

    optional default markup for mobile and no-js browsers here

</aside>

Question 2

Es führt kein Weg daran vorbei, Sie müssen die Werte richtig maskieren, oder das HTML kann nicht richtig geparst werden. Sie können Javascript nicht verwenden, um den Code zu korrigieren, nachdem er geparst wurde, da er dann bereits fehlgeschlagen ist.

Ihr Beispiel mit richtiger HTML-Codierung wäre:

<p class="example" data-example="She said &quot;&lt;abbr title=&quot;What The F***&quot;&gt;WTF&lt;/abbr&gt;&quot; on last night's show.">

Sie können Backslash nicht verwenden, um Zeichen zu maskieren, da es sich nicht um Javascript-Code handelt. Sie verwenden HTML-Entitäten, um Zeichen in HTML-Code mit Escapezeichen zu versehen.

Wenn Sie nicht kontrollieren können, wie die Daten eingegeben werden, sind Sie aufgeschmissen. Man muss einfach einen Weg finden, die Kontrolle darüber zu übernehmen.

Question 3

Verwenden Sie encodeURI, um Anführungszeichen in Ihrem JSON-Objekt zu maskieren. Analysieren Sie die Zeichenfolge mit decodeURI.

var popup = document.getElementById('popup'),
    msgObj = JSON.parse(decodeURI(popup.dataset.message));

console.log(msgObj);

<a id="popup" href="#" data-message="%7B%22title%22:%22Print%22,%22message%22:%22Printing%20not%20yet%20implemented%22%7D" />

Question 4

Wenn es HTML-Strings mit sein müssen " und ' und so weiter, warum nicht einfach separate HTML-Elemente für sie erstellen: http://jsfiddle.net/N7XXu/.

ZB der HTML-Code:

<p class="example" data-which="1">a</p>

<p class="example-data" data-which="1">She said "<abbr title="What The F***">WTF</abbr>" on last night's show.</p>

in Kombination mit folgendem JavaScript:

$('.example').each(function() {
    var correspondingElem = $('.example-data[data-which="'
                              + $(this).data('which')
                              + '"]');
    $(this).data('example', correspondingElem.html());
});

alert($('.example').data('example'));

Natürlich verstecken die .example-data Elemente.

Question 5

Da ich das data-Attribut verwende, um einige Daten zusammen mit dem html-Element von PHP zum JavaScript zu transportieren, verwende ich einfach base64_encode auf dem Backend, dann auf der Client-Seite verwenden base64Decode(input) um die Daten zurückzubekommen. So vermeide ich jede Fluchtorgie. Der von mir verwendete JavaScript-Code befindet sich hier http://www.webtoolkit.info/

Question 6

Damit es sich um richtiges HTML handelt, müssen Sie die lästigen Zeichen maskieren. Ich würde ihnen mit HTML-Entities entkommen. Dies bedeutet, dass das Tool, das zum Eingeben dieser Informationen verwendet wird, diese ordnungsgemäß speichern muss und / oder das Tool, das sie am Backend abruft, sie maskieren muss.

Wenn Sie sie dann in Ihrem JS verwenden möchten, müssen Sie einige Suchen-und-Ersetzen-Funktionen ausführen, um die Zeichen wieder in HTML und Anführungszeichen umzuwandeln.

Die meisten Back-End-Entwicklungssprachen haben eine Art ‘htmlescape/unescape’-Funktionalität, das sollte also nicht allzu schwer sein.

Um es über jQuery zu entkommen, finden Sie hier etwas, das über ein schnelles Google gefunden wurde: http://www.naveen.com.au/javascript/jquery/encode-or-decode-html-entities-with-jquery/289

Question 7

Hier ist ein einfaches Tool, das ich erstellt habe, mit dem Sie HTML codieren können:

Der Trick besteht darin, ihm zweimal zu entkommen.

Ich habe eine zusätzliche \n-Ersetzung hinzugefügt, um mehrzeiligen Text beizubehalten, da er von text() verworfen wird.

Außerdem müssen Sie die Anführungszeichen maskieren, um sie für ein Datenattribut sicher zu machen.

<div id="esc"></div>
<textarea id="escinput" placeholder="Enter text"></textarea>
<script>
    $("#escinput").bind("change paste keyup", function(){
        $("#esc").text($(this).val().replace(/\n/g,'\\n'));
        $("#esc").text($("#esc").html().replace(/"/g, '&quot;'));
    });            
</script>

Dies sollte eine sichere Zeichenfolge für Datenattribute erstellen.

Hier kannst du es testen: http://jsfiddle.net/SplicePHP/n6HFq/

Um es zurück in HTML zu decodieren, verwenden Sie einfach:

<script>
    var attr = $("#idOfElement").data('attribute');
    var decoded = $('<textarea/>').html(attr).val();
</script>

Question 8

Haben Sie versucht, einfache Anführungszeichen für Ihre Daten zu verwenden?

So was:

<p class="example" data-example="She said "WTF" on last night"s show.'>