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

Question

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

Answer 1

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

  // 获取剪贴板中的纯文本内容  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);

Answer 2

可以使用粘贴事件监听器或者一个新特性 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和JavaScriptfunction stripTagsAndScripts(text) {   // 正则表达式清除不需要的元素，只保留纯文本部分。   return text.replace(/<[^>]+>/g, '').replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');}// 向富文本中插入内容（根据需求自定义）function insertPlainText(element, content) {   // 这里我只是简单地追加   element.innerText += content;}

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

参考
clipboardData MDN
Selection MDN