Вложенные цитаты в HTML

Question

Я играю с некоторым bbcode для моего форума и наткнулся на проблему, связанную с несколькими вложенными цитатами. Я пытаюсь реализовать всплывающую подсказку с изображением при наведении мыши.

<a href="javascript:void;" onmouseover="tooltip.show(\'<img src=\1.jpg>\', 200);" onmouseout="tooltip.hide();">\1</a>',

( \ 1 - это значение, которое пользователь вводит между тегами [img] [/ img].)

Как видите, у меня нет цитат вокруг моего img src. Каков правильный синтаксис для указания этого с вложенными цитатами? Я пытался использовать обратную косую черту (\\ "и т. Д.), Но это не работает.

Есть идеи?

Answer 1

Все ваши проблемы с цитатами (и многие другие) исчезнут, как только вы прекратите добавлять встроенные обработчики событий в HTML.

HTML предназначен для представления текстовых и мультимедийных данных, он не должен содержать встроенные CSS и JavaScript.

В качестве первого шага вы можете реорганизовать свой код так, чтобы весь JavaScript был в отдельных файлах.

В HTML:

<a class="bbcode-link" data-src="\1">\1</a>

<script src="script.js"></script>

In script.js:

function showTooltip(e) {
    var filename = e.target.getAttribute('data-src')
    return tooltip.show('<img src="' + filename + '.jpg" />', 200)
}

function hideTooltip() {
    return tooltip.hide()
}

[].forEach.call(
    document.querySelectorAll('a.bbcode-link'),
    function (link) {
        link.addEventListener('mouseover', showTooltip, false)
        link.addEventListener('mouseout', hideTooltip, false)
    }
)

Также я надеюсь, что вы продезинфицируете пользовательский ввод перед тем, как вставить его в HTML.

Справочные ссылки:

• element.addEventListener по MDN (Firefox, Chrome, Opera, Safari, IE9 +)
• element.attachEvent в MSDN (IE6-8)

Answer 2

Это должно работать.

<a href="javascript:void;" 
onmouseover="tooltip.show('<img src=&quot;\1.jpg&quot;>', 200);"
onmouseout="tooltip.hide();">\1</a>',

Внимательно проверьте, как я использовал ", чтобы браузер не анализировал цитату в качестве разделителя значения атрибута. Также вам не нужно экранировать символ ' внутри значения атрибута.

jsfiddle