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; が原因で、最初のボタンが機能しません。- 2 つ目はそうです...しかし、最初のものは文字列で 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/

Answer 1

そこでエスケープする必要があるのは HTML ではありません。HTML 文字エスケープ シーケンス'は 1 つのアポストロフィを生成するため、得られる 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 . スクリプト コードからリスナーをアタッチすると、エンコーディングの問題は発生しません。

Answer 2

htmlspecialchars文字が HTML に問題を引き起こすのを防ぎます。属性値が解析されると'、JS エンジンに渡される前に元の値に変換され、その時点で文字列が壊れます。でエスケープする必要があります\。

Answer 3

hereを参照してください。バックスラッシュで文字をエスケープできます。オプションです：

\'The OC\'

Answer 4

ここに悪いコードがあります。イベントを 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');
});