如何在JavaScript变量中转义单个引号

我面临的问题是，如果我点击按钮，什么都没有发生。我看着控制台。它在我通过的第二个参数中抛出了一个错误

在第二个参数中，问题是一个字符串，因此它用单引号括起来，但从服务器端获得的值也有单引号（父亲的），因此JavaScript不考虑（中间名？'），并抛出语法错误。我如何避免这种情况

源代码：

JSP页面代码：

<input type="button" id="btnSubmit" Value="Edit" onclick="return
       editSeqQuestion('<%=QuestionId%>','<%=Question%>','<%=QuestionDataType%>',
                       '<%=AudioPath%>','<%=securityQuestionType%>')" />

在浏览器中，查看页面源：

代码如下所示：

<input type="button" id="btnSubmit" Value="Edit" onclick="return
       editSeqQuestion('72','what is your first child's nick name?',
       'Alpha Numeric','nickname.wav','SecurityQuestion')" />

错误：

SyntaxError:missing）在参数列表之后

您可以通过在字符前面加反斜杠（\）来转义字符。因此，任何反斜杠字符也必须转义（\\）

我的建议是不要这样做；相反，调用包装器函数。这样，你就不必担心逃避任何事情

<script type="text/javascript">
    function editSeqQuestion(...) {
        ...
    }

    function wrapperFunction() {
        editSeqQuestion('72','what is your first child\'s name?',
        'Alpha Numeric','fathersmiddlename.wav','SecurityQuestion');
    }
</script>

<input ... onclick="wrapperFunction();" />


函数editSeqQuestion（…）{
...
}
函数包装器函数（）{
editSeqQuestion（'72'，'你的第一个孩子叫什么名字？'，
“字母数字”、“fathersmiddlename.wav”、“SecurityQuestion”）；
}
正确的处理方法是转义JSP文件中的HTML，并以不引人注目的方式绑定事件。数据库中的值可以放入
data-*
属性中。例如，您的HTML如下所示。在JSP的顶部包含以下内容：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

以及您的JavaScript：

window.onload = function () {
    document.getElementById("btnSubmit").onclick = function () {
        var questionId = this.getAttribute("data-question-id"),
            question = this.getAttribute("data-question"),
            questionDataType = this.getAttribute("data-question-type"),
            audioPath = this.getAttribute("data-audio-path"),
            securityQuestionType = this.getAttribute("data-security-question-type");
        editSeqQuestion(questionId, question, questionDataType, audioPath, securityQuestionType);
    };
};

当然，使用
addEventListener
“更好”，而不是设置
onload
和
onclick
。所以你可以用这个：

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

然后绑定事件，如：

addEvent(window, "load", function () {
    addEvent(document.getElementById("btnSubmit"), "click", function () {
        // The code from above
    });
});

参考：


addEventListener
：
是的，你有几个选择。其中两个最明显：

处理it服务器端的问题，让您的价值从JSP中进入页面，已经用html实体替换了字符串&apos；如果你是最符合逻辑的（那么你就不用担心你的报价符号了
通过一种或另一种方式将其抽象为js变量。将js变量传递到函数中可以避免转义引号（至少在传递时是这样）
在某些方面，第一个选项是工作量最少的。根据动态程度的不同，您可以选择第二个选项。在这种情况下，我建议jsp在js中为您构建一个漂亮的对象或数组，然后您可以引用它（我猜您有多个问题集）。让jsp在每个元素上设置一个唯一的id，然后让onclick使用相同的id表示法引用数组，以根据需要使用对象/数组存储值。进一步，将函数绑定到元素，并遵循不引人注目的代码方法

在短期内，您的页面可能会出现以下情况：

<script>
  aQs = [
   {v: 72, q: 'What is child&apos;s name', t: 'AN', s: 'nick.wav', title: 'Sec'},
   {v: 23, q: 'What city', t: 'AN', s: 'city.wav', title: 'Sec'}
  ];

  function edQ(qId) {
    dosomething(aQs[qId]);
  }
</script>

<input type="button" id="btn_0" Value="Edit" onclick="edQ(this.id.split('_')[1])" />
<input type="button" id="btn_1" Value="Edit" onclick="edQ(this.id.split('_')[1])" />


aQs=[
{v:72，q:'孩子叫什么名字'，t:'安'，s:'尼克.瓦夫'，标题：'秒'，
{v:23，q:'什么城市'，t:'安'，s:'城市.wav'，标题：'秒'}
];
功能edQ（qId）{
剂量测定法（aQs[qId]）；
}

在这两种情况下，我认为最简单/最安全的处理方法是用html实体替换服务器端。
我认为必须用服务器端模板语言处理它。是否尝试用反斜杠转义它？这看起来像是
stringvar.replace（“，“\\”）的副本
最简单最有效的修复方法：将标记与JavaScript分开。完成。他的jsp将其存储在一个变量中。这些值来自服务器端，因此我无法添加反斜杠，这没有任何帮助。正如您所看到的，引用仍然是错误的。特殊字符需要编码。最好这样做，但您需要很可能不会在JavaScript函数中实际打印值…您会将它们放在
data-*
属性中。除此之外，我也喜欢这个答案。事实上，我已经做到了这一点（或多或少）在动态服务器端构建元素，这些元素在属性中包含自己的数据点。使用jQuery，一次绑定和操作多个元素非常容易。
addEvent(window, "load", function () {
    addEvent(document.getElementById("btnSubmit"), "click", function () {
        // The code from above
    });
});

<script>
  aQs = [
   {v: 72, q: 'What is child&apos;s name', t: 'AN', s: 'nick.wav', title: 'Sec'},
   {v: 23, q: 'What city', t: 'AN', s: 'city.wav', title: 'Sec'}
  ];

  function edQ(qId) {
    dosomething(aQs[qId]);
  }
</script>

<input type="button" id="btn_0" Value="Edit" onclick="edQ(this.id.split('_')[1])" />
<input type="button" id="btn_1" Value="Edit" onclick="edQ(this.id.split('_')[1])" />