javascript - javascript函数中的字符串参数

Question

我有一个功能：

<script>
function params(a,b,c,d) {
// alert (c); 
var question = document.getElementById("question");
question.value = c;
var answer = document.getElementById("answer");
answer.value = d;
var catid = document.getElementById("catid");
catid.value = a;
var qid = document.getElementById("qid");
qid.value = b;
}

<button class="modalInput" rel="#prompt" onClick="params(29,29,'In a FOX TV show, what did &#039;The OC&#039; stand for','Orange County');"><img src=/images/exclamationmark1.png title="Is there an error in this question, report it here." ></button>


<button class="modalInput" rel="#prompt" onClick="params(29,16,'Which reality show is named after a George Orwell character','Big Brother');"><img src=/images/exclamationmark1.png title="Is there an error in this question, report it here." ></button>

第一个按钮不起作用，因为 #&039; - 第二个确实...但是第一个确实来自在字符串上使用 htmlspecialchars()... 所以我认为这会成功吗？

你可以在这里看到它的页面：

http://www.quizboard-cheat.com/component/com_rquote/Itemid,176/catid,29/number_items,999/quotation_marks,0/show_author,1/show_createdate,0/show_notes,0/show_quote,1/sort_column, 0/sort_order,0/view,rquotes/

score 4 · Accepted Answer

它不是需要在那里转义的 HTML。HTML 字符转义序列'将产生一个撇号，所以你得到的 JavaScript 代码是

params(29,29,'In a FOX TV show, what did 'The OC' stand for','Orange County');

显然是语法错误。您只需要使用反斜杠转义字符串分隔符：

<button … onClick="params(29,29,'In a … did \'The OC\' stand for',…);">

或者您需要使用引号作为字符串分隔符 - 这确实需要进行 HTML 转义，因为它们用作 HTML 属性分隔符：

<button … onClick="params(29,29,&#034;In a … did 'The OC' stand for&#034;,…);">

当然，@Kirill Ivlev 是对的。首先，您不应该使用内联事件处理程序属性，而是使用不显眼的 javascript。如果您从脚本代码附加您的侦听器，您将不会遇到任何编码问题。

score 3 · Accepted Answer

htmlspecialchars将阻止字符对 HTML 造成问题。'当属性值被解析时，它会在传递给 JS 引擎之前转换回，然后它会破坏字符串。你需要用\.

score 0 · Accepted Answer

0

看到这里，你可以用反斜杠转义字符，是一个选项：

\'The OC\'

于 2013-05-19T20:18:04.390 回答

score 0 · Accepted Answer

更好的方法可能是使用数据属性。与其把所有东西都塞进一个内联点击处理程序中，你不仅要为 HTML 还要为 JS 转义它，而是将每个参数放在一个单独的data-paramname属性中。除了使转义更易于管理之外，它还将使代码更清晰、更易于阅读。

<div id="questioncontainer">
  <button class="modalInput" rel="#prompt" data-catid="29" data-qid="29"
    data-question="In a FOX TV show, what did &#039;The OC&#039; stand for"
    data-answer="Orange County"><img src=/images/exclamationmark1.png
    title="Is there an error in this question, report it here." >Q1</button>
  <button class="modalInput" rel="#prompt" data-catid="29" data-qid="16"
    data-question="Which reality show is named after a George Orwell character"
    data-answer="Big Brother"><img src=/images/exclamationmark1.png
    title="Is there an error in this question, report it here." >Q2</button>
</div>

下面的代码使用事件委托附加一个事件处理程序来处理其中的所有modalinput按钮。

(function () { // prevent our vars from leaking into the global name-space
  "use strict";
  // querying the DOM is slow, we will be accessing
  // these elements frequently, store references to them
  var question = document.getElementById("question"),
    answer = document.getElementById("answer"),
    catid = document.getElementById("catid"),
    qid = document.getElementById("qid"),

    displayQuestion =  function (evt) {
      var target = evt.target,
        getData = function (name) {
          return target.getAttribute('data-' + name);
        };

      if (target.className.match(/\bmodalinput\b/i)) {
        question.value = getData('question');
        answer.value = getData('answer');
        catid.value = getData('catid');
        qid.value = getData('qid');
      }
    },
    questionContainer = document.getElementById('questioncontainer');

  questionContainer.addEventListener('click', displayQuestion, false);
}());

运行示例

score 0 · Accepted Answer

Firebug 中的错误是：

params(29,29,'In a FOX TV show, what did 'The OC' stand for','Orange County');
                                         ^

score -2 · Accepted Answer

我在这里看到错误的代码。为什么不通过将事件附加到 html 元素来使用不显眼的 javascript：

<button class="modalInput" rel="#prompt" ><img src='/images/exclamationmark1.png' title="Is there an error in this question, report it here." ></button>

document.querySelector('.modalInput[rel=#prompt]').addEventListener(function()
{
  params(29,29,'In a FOX TV show, what did &#039;The OC&#039; stand for','Orange County');
});

javascript - javascript函数中的字符串参数

6 回答 6

Related

Reference