Можно ли повесить событие на комментарии html?

Question

[Мариана Марианова]

Можно ли повесить событие jquery/javascript на комментарии html?
Комментарии такого типа

<p><!-- comment |тип поиска 1|-->ЯБЛОКО<!-- /comment --> <strong>Текст текст текст</strong><!-- comment |тип поиска 2|-->ГРУША<!-- /comment --> Текст текст текст</p>

Нужно найти все комментарии и повесить на них hover
в нашем случае нужен ховер на слово яблоко и груша

Может быть можно как-то найти эти комментарии

<!-- comment |тип поиска 1|-->ЯБЛОКО<!-- /comment -->, <!-- comment |тип поиска 2|-->ГРУША<!-- /comment -->

и в них запихнуть допустим <span></span>
(ну то есть слову "яблоко" или "груша" сделать обертку в виде span)?

Comments

[Даша Циклаури]

читаем спеку
https://www.w3.org/TR/dom41/#comment

Answer 1

[Rsa97]

Нельзя. К тому же, слово "ЯБЛОКО" не входит в комментарий.

Comments

[Мариана Марианова]

может быть можно как-то найти этот комментарий и в него запихнуть допустим Яблоко (ну то есть слову яблоко сделать обертку в виде span)?

[alex4answ]

Мариана Марианова, можно

[Rsa97]

Мариана Марианова, Можно обойти все comment-ноды страницы с помощью treeWalker.

const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_COMMENT,
  {
    acceptNode: (node) => {
      if (/^\s*comment/.test(node.data)) {
        return NodeFilter.FILTER_ACCEPT    
      }
      return NodeFilter.FILTER_REJECT
    }
  }
)

let node = treeWalker.nextNode()
let span
let text

while (node) {
  span = document.createElement('span')
  text = node.nextSibling
  span.innerText = text.data
  text.parentNode.replaceChild(span, text)
  node = treeWalker.nextNode()
}

Answer 2

[Robur]

Яблоко и груша у вас - не комментарии. Это текстовые ноды.
Найти в дереве вы их можете, но текстовые ноды насколько я знаю не создают никаких событий. заворачивайте в span

Comments

[Мариана Марианова]

Так сделать реально средствами javascript?

<!-- comment |тип поиска 1|--><span id="apple">ЯБЛОКО<span><!-- /comment -->

[Robur]

Мариана Марианова, да

[Мариана Марианова]

Robur, как бы обратиться к этим текстовым нодам, чтобы текст внутри них обернуть в span? Наведите на мысль пожалуйста))

[Robur]

самый простой и не очень красивый способ - взять innerHTML и заменить там регуляркой

<!-- comment --> на <span>
<!-- /comment --> на </span>

Другой способ - обходить DOM дерево используя его апи, вот тут много примеров:
https://medium.com/javascript-in-plain-english/how...

Answer 3

[zkrvndm]

Конечно можно, вариантов реализации много, но самый просто выглядит так:

var p_all = document.querySelectorAll('p'); // Ищем все абзацы

// Обходим найденные абзацы в цикле:
for (var n = 0; n < p_all.length; n++) {
    // При помощи автозамены заворачиваем слово яблоко в спаны с атрибутом onmouseover:
    p_all.innerHTML = p_all.innerHTML.replace(/ЯБЛОКО/g, '<span onmouseover="youScript(this);">ЯБЛОКО</span>');
}

Всякий раз, при наведении мышки на слово ЯБЛОКО будет срабатывать скрипт указанный в onmouseover, при этом в сам скрипт будут передаваться ссылка на элемент (this).

Answer 4

[Karpion]

Для начала хорошо бы выяснить, кто и зачем выделил слова "ЯБЛОКО" и "ГРУША" таким нестандартным образом. Может, подкрутить что-то там, где делают эту, мягко говоря, нестандартной ориентации HTML-страницу?