1

Mi problema es este. Tengo un archivo JSON con textos que quiero que varíen en el HTML. No sé si me explico, es para cambiar de un idioma a otro.

El problema es que tengo etiquetas HTML en esos textos y el navegador me escribe las etiquetas.

{
    "es":{
    "text" : "Quiero que este texto tenga una palabra en <i>cursiva</i> y otra en <b>bold</b>"
    },
    
    "en:{
    "text : "I want this text to have one word in <i> italic </i> and another in <b> bold </b>"
    }
}

El recorrido que hace por JavaScript es:

$.getJSON("lang.json", function(json)
{
    //Lenguaje por defecto de la página sessionStorage.setItem("lang", "idioma")"
    if(!localStorage.getItem("lang"))
    {
        localStorage.setItem("lang", "en");
    }
    let lang = localStorage.getItem("lang");
    let doc = json;

    $('.lang').each(function()
    {
        $(this).text(doc[lang][$(this).attr('key')]);
    });//Each

    $('.flagLgs').click(function()
    {
        localStorage.setItem("lang", $(this).attr('id')) ;
        let lang = $(this).attr('id');
        let doc = json;

        $('.lang').each(function()
        {
            $(this).text(doc[lang][$(this).attr('key')]);
        });     //Each
    });     //Funcion click
});     //Get json AJAX

Y lo muestro en HTML así:

<p class="lang" key="text"></p>

Pero el navegador me escribe tal cual, con todo y etiquetas. ¿Qué puede ser lo que falla?, ¿cómo puedo hacer para que se ejecuten las etiquetas HTML como debe ser?

Muchas gracias a todos por vuestro tiempo,

Saludos

1 respuesta 1

4

La función text() inserta un string en crudo dentro del elemento del selector, en cambio la función html() inserta contenido susceptible de ser interpretado por el navegador como HTML.

const miTexto = 'Esto es mi texto <strong>con etiquetas HTML</strong>';

$(function() {
  $('#text').text(miTexto);
  $('#html').html(miTexto);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="text"></div>
<div id="html"></div>

En tu caso, al usar la función text() estás insertando en el DOM un string literal, por eso no se están interpretando las etiquetas HTML. Si usas la función html() deberías ver resuelto tu problema.

Referencias: text(), html()

1
  • Muchísimas gracias. Efectivamente fue la solución al problema.
    – German
    el 25 may. 2021 a las 17:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.