javascript - 如何从某些标签中过滤插入 html (contenteditable)

Question

我有一个带有contenteditable = true属性的标签 div。当粘贴事件发生时，我想从一些标签中过滤粘贴的 html。我该怎么做？

Answer 1

监听paste事件并将 分配textContent 给innerHTML. 由于 的性质textContent，删除了 HTML 标记，但保留了文本输出。

我们setTimeout在事件监听器中使用来说明paste事件处理程序在内容更新之前被触发的事实。

document.querySelector('div').addEventListener('paste', function() {
  setTimeout(() => {
    this.innerHTML = this.textContent;
  }, 0);
})

<div contenteditable="true">

</div>

Answer 2

您可以只查询div特定元素。这是一个例子：

const div = document.querySelector('div')
div.addEventListener('paste', e => {
  setTimeout(() => {
    const elements = getTags('strong');
    console.log('@the paste event, tags count: ', elements.length);
  }, 0);
});

function getTags(tagName) {
  return [...div.querySelectorAll(tagName)];
}

console.log('tags count: ', getTags('strong').length);

<div contenteditable="true" style="border 1px solid black; width: 200px; height: 200px">
  <strong>Some </strong><span>thing </span><strong>for </strong><span>testing</span>
</div>

该getTags函数只查询contenteditable <div>具有特定标签名称的元素。默认情况下，我已经<div>用一些内容填充了它，以显示它在不使用paste事件的情况下工作。

此外，在paste事件监听器中，我曾经setTimeout确保在尝试获取我们感兴趣的元素之前使用新元素更新 DOM。