Экранирование символов / строк в javascript

Question

Как я могу избежать этой строки или я должен сказать символы '"); " ' (; '") ; быть помещенным в этот HTML-элемент

<img src='<?=$this->webroot;?>img/document-note.png' onmouseover="tooltip.pop(this,'<?=$finalNote;?>')" />

$finalNote переменная равна '"); " ' (; '") ; это значение.

Я пытался сделать это:

$finalNote = str_replace('"','\"',$finalNote);
$finalNote = str_replace("'","\'",$finalNote);

Вывод стал таким:

<img ;')"="" \'\")="" (;="" \'="" \"="" );="" onmouseover="tooltip.pop(this,' \'\" src="/img/document-note.png">

Мой код не имеет смысла (я знаю ^_^)

Я также попытался использовать это:

$finalNote = htmlspecialchars($finalNote);

Вывод такой:

<img onmouseover="tooltip.pop(this,' '&quot;); &quot; ' (; '&quot;) ;')" src="/img/document-note.png">

Это все еще не так, потому что когда я наведу на изображение, которое у меня есть, оно дает мне эту ошибку:

Мой вопрос заключается в том, как мне избежать этих значений должным образом, чтобы я мог отобразить их на <img onmouseover="tooltip.pop(this,' '"); " ' (; '") ; ')" /> без этих ошибок.

Ваша помощь будет очень кстати! Спасибо!

Answer 1

Вы выводите строку в Javascript, поэтому сначала нужно убедиться, что это правильный синтаксис Javascript. Этот Javascript затем выводится в HTML, поэтому вам нужно убедиться, что это правильный HTML. Итак, вы смотрите на два этапа кодирования:

htmlspecialchars(json_encode($string))

Чтобы быть более точным:

htmlspecialchars(sprintf('tooltip.pop(this, %s)', json_encode($finalNote)))

Теперь это правильно экранированный контент для onmouseover="...",

Answer 2

<?php

$finalNote = " '\"); \" ' (; '\") ;";

$finalNote = htmlspecialchars(addslashes($finalNote), ENT_QUOTES);

?>

<script>

var tooltip = {
    pop: function(obj, note) {
        console.log(obj);
        console.log(note);
    }
};

</script>
<img src='img/document-note.png' onmouseover="tooltip.pop(this,'<?=$finalNote;?>');" />