javascript - 有没有一种方法可以获取大html字符串中元素的确切indexOf

我正在使用vue.js和quill.js开发应用程序，并在其中创建一些文档。
文档的内容存储在document.content中，它是一个巨大的字符串，其中带有一堆html标签，这些字符串直接来自quill.js。

预览文档时，我正在使用v-html属性在div内渲染大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，获取目标元素的externalHTML并尝试获取indexOf document.content，但是它并不总是有效，因为在大字符串中可能有类似的内容，例如<p>Hello</p>两次，它将只获得第一个。

我的整体方法可能是错误的，但我不确定。

任何建议都欢迎。谢谢！

最佳答案

您可以做的是克隆父元素，使用DOM操作添加注释，然后使用父元素的innerHTML，这是一个示例：

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），以便在克隆父级后可以轻松找到它。