Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

154
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!