JS监听paste事件实现粘贴前移除剪贴板指定内容的方法

核心实现步骤 #

• 调用e.preventDefault()阻止浏览器默认粘贴行为，避免原始剪贴板内容直接插入文本框
• 读取剪贴板内容后，通过字符串替换移除指定的pid="123"片段
• 手动将处理后的内容插入到文本框当前光标位置，对齐原生粘贴的交互体验

完整代码示例 #

myTextArea.addEventListener('paste', (e) => {
    // 阻止默认粘贴
    e.preventDefault();
    // 读取剪贴板纯文本内容
    const originContent = e.clipboardData.getData('text/plain');
    // 移除指定片段，加g修饰符可全局替换所有匹配项
    const processedContent = originContent.replace(/pid="123"/g, '');

    // 处理光标位置，实现正常粘贴效果
    const textarea = e.target;
    const selectStart = textarea.selectionStart;
    const selectEnd = textarea.selectionEnd;
    const originalValue = textarea.value;

    // 拼接新的文本框内容
    textarea.value = originalValue.slice(0, selectStart) + processedContent + originalValue.slice(selectEnd);
    // 移动光标到粘贴内容末尾
    textarea.selectionStart = textarea.selectionEnd = selectStart + processedContent.length;
});

适配场景扩展 #

如果要匹配的目标片段存在格式波动（比如pid前后有空格、引号为单引号），可以调整正则增强兼容性：

// 兼容空格、单双引号的匹配规则
const processedContent = originContent.replace(/pid\s*=\s*["']123["']/g, '');

如果需要处理剪贴板的富文本属性，可将getData的入参改为text/html读取HTML格式内容后再做替换。

内容的提问来源于stack exchange，提问作者user13424765