javascript - 如何转义 JavaScript 变量中的单引号

Question

我遇到了一个问题，比如如果我单击按钮什么也不会发生。我查看了Firebug安慰。它在我传递的第二个参数中抛出错误。

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

源代码:

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')" />

Error: SyntaxError: missing ) after argument list

Answer 1

处理这个问题的正确方法是转义 JSP 文件中的 HTML，并以不显眼的方式绑定(bind)事件。数据库中的值可以放入 data-*属性。例如，您的 HTML 将类似于以下内容。将其包含在 JSP 的顶部:

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

使用<c:out />将编码特殊字符以正确输出到 HTML，例如 ' , " ，和& (除其他外)。

然后将 HTML 更改为:

<input type="button" id="btnSubmit" value="Edit"
       data-question-id="<c:out value="${QuestionId}" />"
       data-question="<c:out value="${Question}" />"
       data-question-data-type="<c:out value="${QuestionDataType}" />"
       data-audio-path="<c:out value="${AudioPath}" />"
       data-security-question-type="<c:out value="${securityQuestionType}" />" />

还有你的 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);
    }
}

然后绑定(bind)事件，例如:

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

引用:

• addEventListener : https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener