引用符はエスケープ後でも構文が破られています

Question

2つのパラメータ（整数と文字列）でアクションを呼び出すボタンがあります。私はYii2を使用しています。

<button class="button_answer" 
    onclick="submitAnswer(
      <?php echo $id ?>, 
      <?php echo '\''.Html::encode($title).'\''?> 
    );"> 
    Submit your answer 
</button> 

それが働いているが、時にパラメータタイトルが単一引用符または二重引用符、は構文が壊れている含まれています。

私はこのようなものになる：私はこの問題を解決する方法を知らない

<button class="button_answer" onclick="submitAnswer(214, 'What's the ...?');"> 
    Post your answer 
</button> 

。

Answer 1

JavaScript用のPHP文字列をエンコードする必要があります。次に、HTML用のJavaScriptをエンコードする必要があります。

<?php 
$js_string_title = json_encode($title); 
$js = "submitAnswer($id, $js_string_title)"; 
$html_safe_js = htmlspecialchars($js); 
?> 

<button class="button_answer" 
    onclick="<?php echo $html_safe_js; ?>"> 
    Submit your answer 
</button> 

---

よりよいアプローチは、完全にJSをインライン化を避けるために、次のようになります。

addEventListener("click", answer_handler); 

function answer_handler(event) { 
    var el = event.target; 
    if (el.classList.contains("button_answer")) { 
     submitAnswer(el.dataset.id, el.dataset.title); 
    } 
}