Есть ли способ получить точный индекс элемента в большой строке html - PullRequest
Новая
       26

Есть ли способ получить точный индекс элемента в большой строке html

0 голосов
/ 09 марта 2020

Я работаю над приложением с vue. js и иглой. js, в котором я создаю некоторые документы. Содержимое документа хранится в document.content, представляющем собой одну гигантскую строку с кучей тегов html, идущих прямо из пера. js.

При предварительном просмотре документа выполняется рендеринг большая html строка внутри div с атрибутом v- html, подобным этому: 

<div v-html="document.content"></div>

т.е. 

document.content = "<p>Hello</p><p>World</p><p>Hello World</p><p>Hello</p>"

Это выглядит как (вы поняли идею): 

<div data-v-4ee08204>
  <p>Hello</p>
  <p>World</p>
  <p>Hello World</p>
  <p>Hello</p>
</div>

Вопрос : при нажатии где-нибудь внутри элемента div можно получить точный индекс символа / слова / элемента, на который я нажал (потому что мне нужно добавить комментарий к нему)?

Я пытался прикрепить прослушиватель щелчка к div, получая внешний HTML целевого элемента и пытаясь получить indexOf document.content, но это не всегда работает, потому что внутри большой строки может быть похожий материал, например <p>Hello</p> дважды, и он получит только первый.

Возможно, весь мой подход неверен, но я не совсем уверен.

Любое предложение приветствуется. Спасибо!

1 Ответ

2 голосов
/ 09 марта 2020

Что вы можете сделать, это клонировать родительский элемент, добавить комментарий с помощью манипуляции DOM, а затем использовать внутренний элемент HTML родительского элемента, вот пример: 

const parent = document.querySelector('#parent');
parent.addEventListener('click', event => {
  event.target.classList.add('toBeModified');

  const clone = parent.cloneNode(true);
  const node = clone.querySelector('.toBeModified');
  const comment = document.createElement('span');
  comment.textContent = '(edited)';
  node.appendChild(comment);
  node.classList.remove('toBeModified');
  event.target.classList.remove('toBeModified');

  console.log(clone.innerHTML);
});
<div id="parent">
  <p>Hello</p>
  <p>World</p>
  <p>Hello World</p>
  <p>Hello</p>
</div>

Для этого нужно добавить класс (toBeModified) к элементу, по которому щелкнули, чтобы его можно было легко найти после клонирования родителя.

...