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

Hier ist eine einfache Javascript-Lösung. Es erweitert String-Objekt mit einer Methode "HTMLEncode", die auf ein Objekt ohne Parameter oder mit einem Parameter verwendet werden kann.

String.prototype.HTMLEncode = function(str) {
  var result = "";
  var str = (arguments.length===1) ? str : this;
  for(var i=0; i<str.length; i++) {
     var chrcode = str.charCodeAt(i);
     result+=(chrcode>128) ? "&#"+chrcode+";" : str.substr(i,1)
   }
   return result;
}
// TEST
console.log("stetaewteaw æø".HTMLEncode());
console.log("stetaewteaw æø".HTMLEncode("æåøåæå"))

Ich habe eine gist "HTMLEncode-Methode für Javascript" .

Answer 2

Basierend auf Angulars sanitize ... (Syntax des es6-Moduls)

// ref: https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js
const SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
const NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;

const decodeElem = document.createElement('pre');

/**
 * Decodes html encoded text, so that the actual string may
 * be used.
 * @param value
 * @returns {string} decoded text
 */
export function decode(value) {
  if (!value) return '';
  decodeElem.innerHTML = value.replace(/</g, '&lt;');
  return decodeElem.textContent;
}

/**
 * Encodes all potentially dangerous characters, so that the
 * resulting string can be safely inserted into attribute or
 * element text.
 * @param value
 * @returns {string} encoded text
 */
export function encode(value) {
  if (value === null || value === undefined) return '';
  return String(value).
    replace(/&/g, '&amp;').
    replace(SURROGATE_PAIR_REGEXP, value => {
      var hi = value.charCodeAt(0);
      var low = value.charCodeAt(1);
      return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
    }).
    replace(NON_ALPHANUMERIC_REGEXP, value => {
      return '&#' + value.charCodeAt(0) + ';';
    }).
    replace(/</g, '&lt;').
    replace(/>/g, '&gt;');
}

export default {encode,decode};

Answer 3

Soweit ich weiß, gibt es keine geradlinige HTML Encode/Decode Methode in Javascript.

Sie können jedoch JS verwenden, um ein beliebiges Element zu erstellen, seinen inneren Text festzulegen und ihn dann mit innerHTML zu lesen.

Sagen wir, mit jQuery, sollte dies funktionieren:

var helper = $('chalk & cheese').hide().appendTo('body');
var htmled = helper.html();
helper.remove();

Oder etwas in dieser Richtung.

Answer 4

Meine reine JS-Funktion:

/**
 * HTML entities encode
 *
 * @param {string} str Input text
 * @return {string} Filtered text
 */
function htmlencode (str){

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

JavaScript HTML-Elemente kodieren und dekodieren

Answer 5

Hier ist ein kleines Stück, das die Server.HTMLEncode Funktion aus Microsofts ASP, geschrieben in reinem JavaScript:

function htmlEncode(s) {
  var ntable = {
    "&": "amp",
    "<": "lt",
    ">": "gt",
    "\"": "quot"
  };
  s = s.replace(/[&<>"]/g, function(ch) {
    return "&" + ntable[ch] + ";";
  })
  s = s.replace(/[^ -\x7e]/g, function(ch) {
    return "&#" + ch.charCodeAt(0).toString() + ";";
  });
  return s;
}

Das Ergebnis nicht kodiert Apostrophe, kodiert aber die anderen HTML-Spezialzeichen und alle Zeichen außerhalb des Bereichs 0x20-0x7e.