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

Sie sollten keine Escape/Codierung von Werten vornehmen müssen, um sie von einem Eingabefeld in ein anderes zu übertragen.

<form>
 <input id="button" type="button" value="Click me">
 <input type="hidden" id="hiddenId" name="hiddenId" value="I like cheese">
 <input type="text" id="output" name="output">
</form>
<script>
    $(document).ready(function(e) {
        $('#button').click(function(e) {
            $('#output').val($('#hiddenId').val());
        });
    });
</script>

JS fügt kein rohes HTML oder ähnliches ein; es sagt dem DOM nur, dass es die value Eigenschaft (oder Attribut; bin mir nicht sicher). So oder so, das DOM behandelt alle Kodierungsprobleme für Sie. Es sei denn, Sie tun etwas Seltsames wie die Verwendung von document.write o eval wird die HTML-Kodierung praktisch transparent sein.

Wenn es darum geht, ein neues Textfeld für das Ergebnis zu erzeugen, ist es genauso einfach. Übergeben Sie einfach den statischen Teil der HTML-Datei an jQuery, und legen Sie dann die restlichen Eigenschaften/Attribute des Objekts fest, das es an Sie zurückgibt.

$box = $('<input type="text" name="whatever">').val($('#hiddenId').val());

Answer 2

Ich hatte ein ähnliches Problem und löste es mit der Funktion encodeURIComponent von JavaScript ( Dokumentation )

Zum Beispiel, wenn Sie in Ihrem Fall verwenden:

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

und

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

erhalten Sie chalk%20%26%20cheese . Auch Räume werden beibehalten.

In meinem Fall musste ich einen Backslash kodieren und dieser Code funktioniert perfekt

encodeURIComponent('name/surname')

und ich habe name%2Fsurname

Answer 3

<script>
String.prototype.htmlEncode = function () {
    return String(this)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');

}

var aString = '<script>alert("I hack your site")</script>';
console.log(aString.htmlEncode());
</script>

Wird ausgegeben: <script>alert("I hack your site")</script>

.htmlEncode() ist nach der Definition für alle Zeichenketten zugänglich.

Answer 4

Ich bin auf einige Probleme mit dem Backslash in meiner Domain gestoßen \User String.

Ich habe dies zu den anderen Fluchten aus der Antwort von Anentropic hinzugefügt

.replace(/\\/g, '\')

Das habe ich hier gefunden: Wie entkommt man dem Backslash in JavaScript?

Answer 5

HtmlEncodiert den angegebenen Wert

  var htmlEncodeContainer = $('<div />');
  function htmlEncode(value) {
    if (value) {
      return htmlEncodeContainer.text(value).html();
    } else {
      return '';
    }
  }