funciona - javascript pdf

Decodificar y amp; volver a y en JavaScript

Question

Tengo cadenas como

var str = ''One & two & three'';

representado en HTML por el servidor web. Necesito transformar esas cuerdas en

''One & two & three''

Actualmente, eso es lo que estoy haciendo (con la ayuda de jQuery):

$(document.createElement(''div'')).html(''{{ driver.person.name }}'').text()

Sin embargo, tengo la inquietante sensación de que lo estoy haciendo mal. Yo he tratado

unescape("&")

pero parece que no funciona, ni decodeURI / decodeURIComponent.

¿Hay alguna otra manera más nativa y elegante de hacerlo?

Answer 1

¿Necesita decodificar todas las entidades HTML codificadas o simplemente & ¿sí mismo?

Si solo necesitas manejar & entonces puedes hacer esto:

var decoded = encoded.replace(/&/g, ''&'');

Si necesita decodificar todas las entidades HTML, puede hacerlo sin jQuery:

var elem = document.createElement(''textarea'');
elem.innerHTML = encoded;
var decoded = elem.value;

Tome nota de los comentarios de Mark a continuación que resaltan los agujeros de seguridad en una versión anterior de esta respuesta y recomiende usar textarea lugar de div para mitigar las posibles vulnerabilidades de XSS. Estas vulnerabilidades existen ya sea que use jQuery o JavaScript simple.

Answer 2

En caso de que lo estés buscando, como yo, mientras tanto, hay un método agradable y seguro de JQuery.

https://api.jquery.com/jquery.parsehtml/

Puedes f.ex. escribe esto en tu consola:

var x = "test &";
> undefined
$.parseHTML(x)[0].textContent
> "test &"

Entonces $ .parseHTML (x) devuelve una matriz, y si tiene marcas HTML en su texto, array.length será mayor que 1.

Answer 3

Matthias Bynens tiene una biblioteca para esto: https://github.com/mathiasbynens/he

Ejemplo:

console.log(
    he.decode("Jörg &amp Jürgen rocked to & fro ")
);
// Logs "Jörg & Jürgen rocked to & fro"

Sugiero que se favorezca sobre los hacks que implican establecer el contenido HTML de un elemento y luego leer su contenido de texto. Dichos enfoques pueden funcionar, pero son engañosamente peligrosos y presentan oportunidades de XSS si se usan en las entradas de usuarios que no son de confianza.

Si realmente no puede soportar cargar en una biblioteca, puede usar el textarea descrito en esta respuesta a una pregunta casi duplicada, que, a diferencia de varios enfoques similares que se han sugerido, no tiene agujeros de seguridad que yo sepa:

function decodeEntities(encodedString) {
    var textArea = document.createElement(''textarea'');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

console.log(decodeEntities(''1 & 2'')); // ''1 & 2''

¡Pero tome nota de los problemas de seguridad, que afectan a enfoques similares a este, que incluyo en la respuesta vinculada! Este enfoque es un truco, y los cambios futuros en el contenido permitido de un área de textarea (o errores en navegadores específicos) podrían llevar a un código que dependa de que repentinamente tenga un agujero XSS algún día.

Answer 4

Para chicos de una línea:

const htmlDecode = innerHTML => Object.assign(document.createElement(''textarea''), {innerHTML}).value;

console.log(htmlDecode(''Complicated - Dimitri Vegas & Like Mike''));

Answer 5

Primero crea un <span id="decodeIt" style="display:none;"></span> en algún lugar del cuerpo

Luego, asigne la cadena que se decodificará como innerHTML a esto:

document.getElementById("decodeIt").innerHTML=stringtodecode

Finalmente,

stringtodecode=document.getElementById("decodeIt").innerText

Aquí está el código general:

var stringtodecode="<B>Hello</B> world<br>";
document.getElementById("decodeIt").innerHTML=stringtodecode;
stringtodecode=document.getElementById("decodeIt").innerText

Answer 6

Puede usar Lodash unescape / función de escape https://lodash.com/docs/4.17.5#unescape

import unescape from ''lodash/unescape'';

const str = unescape(''fred, barney, & pebbles'');

str se convertirá en ''fred, barney, & pebbles''

Answer 7

Una opción más moderna para interpretar HTML (texto y otros) desde JavaScript es el soporte HTML en la API DOMParser ( ver aquí en MDN ). Esto le permite usar el analizador HTML nativo del navegador para convertir una cadena en un documento HTML. Se ha admitido en nuevas versiones de todos los principales navegadores desde finales de 2014.

Si solo queremos decodificar un poco de contenido de texto, podemos ponerlo como único contenido en un cuerpo de documento, analizar el documento y extraer el .body.textContent .

var encodedStr = ''hello & world'';

var parser = new DOMParser;
var dom = parser.parseFromString(
    ''<!doctype html><body>'' + encodedStr,
    ''text/html'');
var decodedString = dom.body.textContent;

console.log(decodedString);

En el borrador de la especificación para DOMParser podemos ver que JavaScript no está habilitado para el documento analizado, por lo que podemos realizar esta conversión de texto sin preocupaciones de seguridad.

El parseFromString(str, type) debe ejecutar estos pasos, según el tipo :

• "text/html"

  Parse str con un HTML parser y devuelva el Document recién creado.

  El indicador de scripting debe estar configurado en "deshabilitado".

  NOTA

  script elementos de script se marcan como no noscript y los contenidos de noscript se noscript como marcas.

Está más allá del alcance de esta pregunta, pero tenga en cuenta que si toma los nodos DOM procesados ​​ellos mismos (no solo su contenido de texto) y los mueve al documento en vivo DOM, es posible que sus scripts se vuelvan a activar, y no podría ser preocupaciones de seguridad. No lo he investigado, así que por favor tenga cuidado.

Answer 8

jQuery codificará y decodificará para ti. Sin embargo, debe usar una etiqueta textarea, no un div.

var str1 = ''One & two & three'';
var str2 = "One & two & three";
  
$(document).ready(function() {
   $("#encoded").text(htmlEncode(str1)); 
   $("#decoded").text(htmlDecode(str2));
});

function htmlDecode(value) {
  return $("<textarea/>").html(value).text();
}

function htmlEncode(value) {
  return $(''<textarea/>'').text(value).html();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="encoded"></div>
<div id="decoded"></div>

Answer 9

una solución de JavaScript que atrapa las comunes:

var map = {amp: ''&'', lt: ''<'', gt: ''>'', quot: ''"'', ''#039'': "''"}
str = str.replace(/&([^;]+);/g, (m, c) => map[c])

esto es el reverso de https://.com/a/4835406/2738039

Answer 10

element.innerText también hace el truco.

Answer 11

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
    };
})();

Esto es del código fuente ExtJS.