js如何在粘贴文本到指定组件之前做内容替换？

Question

js如何在粘贴文本到指定组件之前做内容替换？

Answer 1

可以使用粘贴事件监听器或者一个新特性 ClipboardEvent.clipboardData

因为 clipboardData 还处于实验阶段，以下解决方案兼容性有待考证（但根据浏览器兼容性列表，主流浏览器都有实现，所以问题不大）

// 获取富文本编辑器
const editorElement = document.getElementById('rich-text-editor');

// 监听粘贴事件
editorElement.addEventListener('paste', function(event) {
  // 阻止默认的粘贴行为
  event.preventDefault();

  // 获取剪贴板中的文本数据
  const clipboardData = event.clipboardData || window.clipboardData;
  const pastedText = clipboardData.getData('text/plain');

  // 清除HTML和JavaScript代码，只保留纯文本部分
  const plainText = stripTagsAndScripts(pastedText);

  // 在富文本编辑器中插入纯文本内容
  insertPlainText(editorElement, plainText);
});

// 清除HTML和JavaScript
function stripTagsAndScripts(text) {
   // 正则表达式清除不需要的元素，只保留纯文本部分。
   return text.replace(/<[^>]+>/g, '').replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
}

// 向富文本中插入内容（根据需求自定义）
function insertPlainText(element, content) {
   // 这里我只是简单地追加
   element.innerText += content;
}

上面只是简单实现插入，如果想具体插入到光标所在位置等更复杂的需求可以参考下方 Selection 链接自行完善

参考
clipboardData MDN
Selection MDN

Answer 2

试试这几个方法能实现你想要的不

  // 获取剪贴板中的纯文本内容
  var clipboardData = event.clipboardData || window.clipboardData;
  var plainText = clipboardData.getData("text/plain");

  // 使用正则表达式替换HTML和JS代码,替换掉所有的HTML标签和script标签
  var cleanText = plainText.replace(/<[^>]+>/g, "");

  // 插入替换后的文本到目标组件中
  document.execCommand("insertHTML", false, cleanText);