Question

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

预览文档时，我在具有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>两次，它将仅获得第一个。

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

任何建议都值得欢迎。谢谢！

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>

这是在被单击的元素中添加一个类（toBeModified），以便在克隆父对象后可以轻松找到它。

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

1 个答案: