时间戳

首页 > 解决方案 > 有没有办法在大 html 字符串中获取元素的确切 indexOf

javascript - 有没有办法在大 html 字符串中获取元素的确切 indexOf

问题描述

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

预览文档时，我在具有 v-html 属性的 div 中呈现大 html 字符串，如下所示：

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

IE

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，获取目标元素的 outerHTML 并尝试获取 indexOf document.content，但它并不总是有效，因为大字符串中可能有类似的东西，比如<p>Hello</p>两次，它只会得到第一个。

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

欢迎任何建议。谢谢！

标签： javascriptvue.jsquill

解决方案

您可以做的是克隆父元素，使用 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) 添加到单击的元素，以便在克隆父元素后可以轻松找到它。

推荐阅读