Вложенные цитаты в 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>

В 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