Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

156
Vistas
HTML tags inside string literal are not being passed to JS method correctly

So I have read from a JSON file. And I can easily get the name value and photo_url value and some of the bio for each "person".

https://codepen.io/lpmurray16/pen/ExvpQgP

This is where the JSON is: https://bensdemo.prod.equisolve-dev.com/api/v1/eq-test

So in the JavaScript file found within the codepen linked above (sorry for the formatting it does that every time I save...), but lines 23-40 is a function that gets called onClick for the class "card" and the button tag in these lines below... I pass the arguments into this function as ${person.arg} and you can see it works for some of the people because when you click on the first three people it opens the modal with the correct information in every spot. But in one of the person.bio within the JSON it breaks due to a delimiter on an anchor tag like this --> ".

Am I missing something obvious? This is as close as I get without ripping my hair out. And the error message is just Uncaught "SyntaxError: Invalid or unexpected token" on line 1 of the HTML file. Which doesn't help at all? Am I missing a closing tag or something?

document.getElementById("cards").innerHTML = `
    ${allData.map(function (person) {
        
        let regex = /[_\*#"]/g;

        return `
            <div class="card flex-col" 
             onClick="changeModalContent('${person.name.replace(regex,"")}', 
             '${person.title}','${person.photo_url}', '${person.bio}'); modal.open();">
            <div class="card_top">
                <img class="prof_pic" src="${person.photo_url}" 
                 alt="${person.name.replace(regex, "")}"/>
            </div>
            <div class="card_bottom flex-col">
                <h3 class="prof_name">${person.name.replace(regex, "")}</h3>
                <p class="prof_title">${person.title}</p>
                <button class="view_button" 
                    onClick="changeModalContent('${person.name.replace(regex,"")}', 
                    '${person.title}', '${person.photo_url}', '${person.bio}'); 
                    modal.open();">View Bio
                </button>
            </div>
        </div>
    `;
    }).join("")}
`;
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The problem is not the double quotes in the anchor tag, it's the \r\n in your source json. You can tell because the entry for Sam Darnold does not have any "s in it. You'll need to sanitize the carriage return and line-feeds out first.

Update your regex to be:

let regex = /[_\*#"\r\n]/g;

Then replace both instances of:

${person.bio}

with:

${person.bio.replace(regex, "")}

Now your code will render correctly as you can see in the working codepen.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda