Javascript 字符串中的字符（'；）存在问题

我遇到的问题是，当添加带有“'”字符的名称时，会出现错误。错误是

addLocation({ lat:-11.8445642, lng:-41.221212, name: 'EXAMPLE'S' })

问题是显而易见的：在name属性中，字符串“示例”在字符串的中间有一个“‘’”，它切断了字符串的结尾，并且不发送这个对象。 此函数中的某些名称可能具有此字符。 我如何让它工作，包括这个角色

我尝试了replace方法，如函数代码providen所示，但它仍然不起作用。也许我不知道如何使用它，或者在这种情况下它不起作用

    function contentBuilder({ name, geometry }) {
        const { location } = geometry

        name.replace(/'/g,"\'");

        return `
            ${name}</br>
            ${location.lat()}</br>
            ${location.lng()}</br>
            <a onclick="addLocation({ lat:${location.lat()}, lng:${location.lng()}, name: '${name}' })" class="map-add-link">Adcionar +</a>
       `
    }
  function addLocation(location) {
        revealLocationSelector('newPlaceMap');

         if(!containLocation(locations,location)){
            locations.push(location);
        }

函数contentBuilder（{name，geometry}）{
常数{location}=几何体
名称。替换（/“/g，\”）；
返回`
${name}

${location.lat（）}

${location.lng（）}

阿德乔纳+
`
}
函数addLocation（位置）{
RevelocallocationSelector（“newPlaceMap”）；
如果（！containLocation（位置，位置））{
位置。推（位置）；
}

---

当函数被发送时，它应该会给我指定的错误。我应该能够将对象发送到de-addLocation函数

您不应该自己构建JS字符串。最简单的简单修复方法是执行

name.replace（/'/g，\\\''））

这样您就可以用反斜杠转义单引号。请注意，反斜杠本身必须作为

\\

转义

` ... name: '${name.replace(/'/g,"\\'")}' ...`

但是，如果字符串包含双引号或任何其他需要转义的内容（如

\n\b

），则该属性将中断，并且您还需要知道包含HTML属性的引号的类型，并且您可能应该将其转义为HTML，因为额外的关闭>可能会中断HTML

最好的方法是对整个JSON字符串进行HTML编码，以便 将在任何上下文中工作，并且不允许HTML注入，这可能容易受到XSS攻击

const loc={
lat:-11.8445642，
液化天然气：-41.221212，
名称：“带的转义字符串不应显示粗体和JS字符\n\r\\\””
};
函数htmlEncode（str）{
返回str.replace（//&/g，，&；'）。replace（//“/g，”）。replace（//“/g，，&&39；'）。replace（///g，”）；
}
函数htmlJsonEncode（obj）{
返回htmlEncode（JSON.stringify（obj））；
}
document.querySelector（“div.output”）.innerHTML+=`
名称：${htmlEncode（loc.name）}

横向：横向位置

长：定位液化天然气



`；

---

好的，在这种情况下，对我有用的是：

 function contentBuilder({ name, geometry }) {
        const { location } = geometry;
        let nameShow = name;
        name = name.replace(/'/g,"\\'");
        console.log(name);

        return `
            ${nameShow}</br>
            ${location.lat()}</br>
            ${location.lng()}</br>
            <a onclick="addLocation({ lat:${location.lat()}, lng:${location.lng()}, name: '${name}' })" class="map-add-link">Adcionar +</a>
        `
    }

函数contentBuilder（{name，geometry}）{
常数{location}=几何体；
让nameShow=name；
name=name.replace（/'/g，\\''）；
console.log（名称）；
返回`
${nameShow}

${location.lat（）}

${location.lng（）}

阿德乔纳+
`
}

---

我刚刚在replace函数中添加了另一个/。我不知道为什么，但它起到了很好的作用。

replace不直接修改字符串，它返回新值，因此需要执行类似以下操作：

name=name.replace（/'/g，\''））

@AustinGreco您的建议也有相同的效果，即没有！尝试一下，在这种情况下，stringify更好。只需要小心添加引号字符。在${name}周围转义。例如name:\“${name}\”这几乎奏效。适用于没有“'在这个中间，现在我得到了这个错误：“代码>地址（18.8444642），“LNG”：-48.2525225，“name”：“AMORICANA饮料< /代码>它仍然是字符串的一半。它最终应该是“饮料”。我按照你的建议制作了这个对象。第一个建议， name：'${JSON.String（name）}。“..也不起作用。在这种情况下，会发生以下情况：

addLocation({lat:-18.8444642，lng:-48.2525225，name:'

@PedroHenriqueBufulindeAlme我不确定什么不起作用，你应该解释一下。但是，我添加了一个示例，说明它在任何上下文中如何工作。之所以起作用，是因为你需要转义

'

是带有

\

的字符串，但要做到这一点，你需要转义backslash也作为\\。请注意，如果字符串有双引号、新行或任何其他需要转义的内容，则代码仍将中断。您应该使用我建议的方法，我将添加HTML转义，以便引号不会与HTML混淆。在这种情况下，我只需要处理

”

，因为添加的所有位置的名称都不会被转义e一句新词或双引号。按照你的建议去做会有点过头，但我会为了良好的实践去做。谢谢如果这是良好的实践，那就没有过头。这样做并不会花费你很多钱。