HTML-Kodierung geht verloren, wenn Attribut aus Eingabefeld gelesen wird

Question

Ich verwende JavaScript, um einen Wert aus einem verborgenen Feld zu ziehen und ihn in einem Textfeld anzuzeigen. Der Wert im verborgenen Feld ist kodiert.

Zum Beispiel,

<input id='hiddenId' type='hidden' value='chalk &amp; cheese' />

wird hineingezogen

<input type='text' value='chalk &amp; cheese' />

über einige jQuery, um den Wert aus dem ausgeblendeten Feld zu erhalten (es ist an diesem Punkt, dass ich die Codierung verlieren):

$('#hiddenId').attr('value')

Das Problem ist, dass ich beim Lesen chalk & cheese aus dem verborgenen Feld, scheint JavaScript die Kodierung zu verlieren. Ich möchte nicht, dass der Wert zu sein chalk & cheese . Ich möchte die wörtliche amp; beibehalten werden.

Gibt es eine JavaScript-Bibliothek oder eine jQuery-Methode, die eine Zeichenkette in HTML kodiert?

Answer 1

Für diejenigen, die einfaches Javascript bevorzugen, hier ist die Methode, die ich erfolgreich verwendet habe:

function escapeHTML (str)
{
    var div = document.createElement('div');
    var text = document.createTextNode(str);
    div.appendChild(text);
    return div.innerHTML;
}

Answer 2

Gute Antwort. Beachten Sie, dass wenn der zu kodierende Wert undefined o null mit jQuery 1.4.2 erhalten Sie möglicherweise Fehler wie:

jQuery("<div/>").text(value).html is not a function

OR

Uncaught TypeError: Object has no method 'html'

Die Lösung besteht darin, die Funktion so zu ändern, dass sie auf einen aktuellen Wert prüft:

function htmlEncode(value){ 
    if (value) {
        return jQuery('<div/>').text(value).html(); 
    } else {
        return '';
    }
}

Answer 3

Die Kodierung geht übrigens nicht verloren. Die Kodierung wird vom Markup-Parser (Browser) beim Laden der Seite verwendet. Sobald die Quelle gelesen und geparst wird und der Browser das DOM in den Speicher geladen hat, wurde die Kodierung in das geparst, was es darstellt. Wenn Ihr JS also irgendetwas im Speicher lesen soll, erhält es das Zeichen, das die Kodierung darstellt.

Es mag sein, dass ich hier rein semantisch vorgehe, aber ich wollte, dass Sie den Zweck der Kodierung verstehen. Das Wort "verloren" klingt, als würde etwas nicht so funktionieren, wie es sollte.

Answer 4

Schneller ohne Jquery. Sie können jedes Zeichen in Ihrem String kodieren:

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

Oder Sie sollten sich nur um die wichtigsten Zeichen kümmern (&, Zeilenumbrüche, <, >, " und '):

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

test.value=encode('Encode HTML entities!\n\n"Safe" escape <script id=\'\'> & useful in <pre> tags!');

testing.innerHTML=test.value;

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

<textarea id=test rows="9" cols="55"></textarea>

<div id="testing">www.WHAK.com</div>

Answer 5

Prototyp hat es eingebaut die String-Klasse . Wenn Sie also Prototype verwenden bzw. dies planen, funktioniert es in etwa so:

'<div class="article">This is an article</div>'.escapeHTML();
// -> "&lt;div class="article"&gt;This is an article&lt;/div&gt;"