кавычки javascript внутри кавычек, проблема строкового литерала

Question

Я пытаюсь отобразить текст во всплывающей подсказке javascript

Я получаю неопределенные строковые литералы, даже если: a) кавычки сокращаются, b) нет разрывов строк

Текст, который я пытаюсь отобразить:

"No, we can't. This is going to be terrible."

(это цитата отдельного человека, и я хочу, чтобы эти цитаты отображались во всплывающей подсказке)

Моя функция всплывающей подсказки работает следующим образом

onMouseOver="Tip('string here')"

После того, как я пропустил строку через свою функцию для очистки для JavaScript

function jschars($str) {
        echo preg_replace("/\r?\n/", "\\n", addslashes($str));
}

В HTML это выглядит примерно так:

onMouseOver="Tip('\"No, we can\'t. This is going to be terrible.\"')"

Это дает мне ошибкунеопределенный строковый литерал для первого \ in Tip ('\

Я думаю, это потому, что я пытаюсь поместить кавычки прямо в одинарные кавычки, как я могу обойти это в таких ситуациях? (Я пыталсяhtmlspecial символы, такие как замена "на" - я все еще получаю ошибку

Answer 1

Это потому, что вы помещаете двойные кавычки в значение элемента XML (или html):

<div onMouseOver="Tip('\".......

обратная косая черта не выходит из контекста xml / html.Технически, вам нужно будет кодировать строку (после того, как вы ее javascript).Примерно так:

<div onMouseOver="Tip('\&quot;No, we can\'t. This is going to be terrible.\&quot;')" >

Различные браузеры могут или не могут справиться с этим должным образом. намного лучший способ приблизиться к нему - дать элементу идентификатор (или класс, или каким-либо другим способом для его выбора), а затем добавить обработчик указателя мыши из автономного скрипта.

Answer 2

Из-за структуры того, что вы делаете:

onMouseOver="Tip('string here')"

... вам нужно сделать две вещи:

1. Как сказал Лекенштейн, вам нужно использовать htmlspecialchars, чтобы превратить любые специальные символы HTML в экранирование символов.Он превращает " в ", что означает, что вы можете безопасно заключить атрибут в " символов.

2. Но вы не просто используете это как атрибутвы также помещаете его внутрь строкового литерала, что означает, что вам также нужно сделать JavaScript, экранирующий строку.В противном случае (в вашем случае) один символ ' или обратная косая черта испортят строку.Таким образом, ваша jschars функция также должна (по порядку) A) конвертировать \ в \\, B) конвертировать ' в \'.Во всяком случае, это минимум, на самом деле вам нужна тщательная функция «сделать это безопасным для вставки в JavaScript-литерал».От вашего вопроса у меня создалось впечатление, что вы делали это вручную, но лучше автоматизировать его для согласованности.

Не по теме : Отдельно я бы хотелрекомендуем отойти от использования атрибутов для прикрепления обработчиков.Вместо этого посмотрите на attachEvent (IE) и addEventListener (W3C), или еще лучше посмотрите на библиотеку, такую ​​как jQuery , Closure , Prototype , YUI или любой из нескольких других , которые сгладят все для вас.Например, присоединяя обработчик наведения мыши к:

Вы можете использовать этот обработчик для обработки наведения мыши:

function handler() {
    Tip('Your message here');
}

... которую вы затем подключаете вот так с необработанным DOM-материалом (очевидно,для этого вам понадобится вспомогательная функция:

var div = document.getElementById('foo');
if (div.attachEvent) {
    // Uses "onmouseover", not "mouseover"
    div.attachEvent('onmouseover', handler);
}
else if (div.addEventListener) {
    // Uses "mouseover", not "onmouseover"
    div.attachEvent('mouseover', handler, false);
}
else {
    // Fallback to old DOM0 stuff
    div.onmouseover = handler;
}

Вот как Prototype упрощает этот процесс подключения:

$('foo').observe('mouseover', handler);

Вот как jQuery делает:

$('#foo').mouseover(handler);

Answer 3

Вы должны использовать htmlspecialchars() для этой цели.Проблема ", но HTML не поймет цитирование javascript, поэтому он останавливается на \".

function jschars($str) {
        echo htmlspecialchars(preg_replace("/\r?\n/", "\\n", $str), ENT_QUOTES);
}

Answer 4

Вы можете оставить строку в JavaScript вместо HTML. например:

<a onmouseover="Tip(this, 123)">choice</a>

Тогда что-то вроде:

var texts = {
  123:"No, we can't. This is going to be terrible.",
  ...
};

function Tip(elm, txtId){
  showTip(elm, texts[txtid];
}