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

var htmlEnDeCode = (function() {
    var charToEntityRegex,
        entityToCharRegex,
        charToEntity,
        entityToChar;

    function resetCharacterEntities() {
        charToEntity = {};
        entityToChar = {};
        // add the default set
        addCharacterEntities({
            '&'     :   '&',
            '>'      :   '>',
            '&lt;'      :   '<',
            '&quot;'    :   '"',
            '&#39;'     :   "'"
        });
    }

    function addCharacterEntities(newEntities) {
        var charKeys = [],
            entityKeys = [],
            key, echar;
        for (key in newEntities) {
            echar = newEntities[key];
            entityToChar[key] = echar;
            charToEntity[echar] = key;
            charKeys.push(echar);
            entityKeys.push(key);
        }
        charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');
        entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');
    }

    function htmlEncode(value){
        var htmlEncodeReplaceFn = function(match, capture) {
            return charToEntity[capture];
        };

        return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);
    }

    function htmlDecode(value) {
        var htmlDecodeReplaceFn = function(match, capture) {
            return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
        };

        return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
    }

    resetCharacterEntities();

    return {
        htmlEncode: htmlEncode,
        htmlDecode: htmlDecode
    };
})();

Dies ist aus dem ExtJS-Quellcode.

Answer 2

Wenn Sie jQuery verwenden möchten. Ich fand dies:

http://www.jquerysdk.com/api/jQuery.htmlspecialchars

(Teil des jquery.string-Plugins, das vom jQuery SDK angeboten wird)

Das Problem mit Prototype ist meines Erachtens, dass es die Basisobjekte in JavaScript erweitert und nicht mit jQuery kompatibel ist, das Sie möglicherweise verwendet haben. Natürlich, wenn Sie bereits Prototype und nicht jQuery verwenden, wird es nicht ein Problem sein.

EDIT: Auch gibt es diese, die eine Portierung von Prototype's String-Dienstprogramme für jQuery ist:

http://stilldesigning.com/dotstring/

Answer 3

Auswählen, was escapeHTML() in der Datei prototype.js durchgeführt wird

Das Hinzufügen dieses Skripts hilft Ihnen, escapeHTML:

String.prototype.escapeHTML = function() { 
    return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
}

jetzt können Sie die escapeHTML-Methode für Zeichenketten in Ihrem Skript aufrufen, z. B:

var escapedString = "<h1>this is HTML</h1>".escapeHTML();
// gives: "&lt;h1&gt;this is HTML&lt;/h1&gt;"

Ich hoffe, das hilft allen, die nach einer einfachen Lösung suchen, ohne die gesamte prototype.js einbinden zu müssen

Answer 4

Unter Verwendung einiger der anderen Antworten hier habe ich eine Version erstellt, die alle relevanten Zeichen in einem Durchgang ersetzt, unabhängig von der Anzahl der verschiedenen kodierten Zeichen (nur ein Aufruf von replace() ) und ist daher bei größeren Zeichenketten schneller.

Sie ist weder auf die DOM-API noch auf andere Bibliotheken angewiesen.

window.encodeHTML = (function() {
    function escapeRegex(s) {
        return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    }
    var encodings = {
        '&'  : '&',
        '"'  : '"',
        '\'' : ''',
        '<'  : '&lt;',
        '>'  : '&gt;',
        '\\' : '&#x2F;'
    };
    function encode(what) { return encodings[what]; };
    var specialChars = new RegExp('[' +
        escapeRegex(Object.keys(encodings).join('')) +
    ']', 'g');

    return function(text) { return text.replace(specialChars, encode); };
})();

Nachdem Sie das einmal ausgeführt haben, können Sie nun

encodeHTML('<>&"\'')

Um die <>&"'

Answer 5

function encodeHTML(str) {
    return document.createElement("a").appendChild( 
        document.createTextNode(str)).parentNode.innerHTML;
};

function decodeHTML(str) {
    var element = document.createElement("a"); 
    element.innerHTML = str;
    return element.textContent;
};
var str = "<"
var enc = encodeHTML(str);
var dec = decodeHTML(enc);
console.log("str: " + str, "\nenc: " + enc, "\ndec: " + dec);