有没有办法在大 html 字符串中获取元素的确切索引

Question

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

在预览文档时，我在 div 中渲染大 html 字符串，其中包含 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 中的某处时，是否有办法获取我单击的 character/word/element 的确切索引（因为我需要向其添加评论）？

我尝试将点击侦听器附加到 div，获取目标元素的 outerHTML 并尝试获取 indexOf document.content，但它并不总是有效，因为可以像 <p>Hello</p> 这样的大字符串中的类似东西两次，它只会得到第一个。

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

欢迎提出任何建议。谢谢！

Answer 1

你可以做的是克隆父元素，使用 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>

这样做的目的是向单击的元素添加 class (toBeModified)，以便在克隆父元素后可以轻松找到它。

有没有办法在大 html 字符串中获取元素的确切索引

Is there a way to get the exact indexOf an element in a big html string

javascript

quill

vue.js