HTML 字符串文字中的标签未正确传递给 JS 方法

Question

所以我已经从 JSON 文件中读取了。我可以很容易地得到名字值和 photo_url 值以及每个“人”的一些个人简介。

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

这是 JSON 所在的位置： https://bensdemo.prod.equisolve-dev.com/api/v1/eq-test

所以在上面链接的 codepen 中找到的 JavaScript 文件中（很抱歉每次我保存时它都会格式化...），但是第 23-40 行是一个调用 onClick 的函数class“卡片”和下面这些行中的按钮标签...我将参数作为 ${person.arg} 传递给此函数，您可以看到它对某些人有效，因为当您单击前三个人，它会打开每个位置都有正确信息的模态。但是在 JSON 中的 person.bio 之一中，它由于锚标记上的定界符而中断 --> ".

我是不是遗漏了什么明显的东西？这是我在不扯掉头发的情况下得到的最接近的结果。并且错误消息只是 HTML 文件第 1 行中未捕获的“SyntaxError：无效或意外标记”。哪个根本没有帮助？我是不是漏掉了结束标签之类的东西？

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

Answer 1

问题不在于锚标记中的双引号，而是源 json 中的 \r\n。您可以看出，因为 Sam Darnold 的条目中没有任何 "。您需要先清洁笔架 return 并换行。

将您的正则表达式更新为：

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

然后替换两个实例：

${person.bio}

与：

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

现在您的代码将正确呈现，正如您在 working codepen 中看到的那样。

HTML 字符串文字中的标签未正确传递给 JS 方法

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

javascript

json

string-literals