如何实现粘贴内容到HTML输入框时仅提取第一个字符串

你可以通过监听输入框的paste事件，自定义剪贴板内容处理逻辑来实现需求，完整可运行的示例代码如下：

<!-- 目标输入框 -->
<input type="text" id="pasteInput" placeholder="粘贴内容测试">

<script>
const inputEle = document.querySelector('#pasteInput');

inputEle.addEventListener('paste', (event) => {
  // 阻止浏览器默认粘贴行为
  event.preventDefault();
  // 读取剪贴板纯文本内容，自动过滤所有HTML标签
  const clipText = (event.clipboardData || window.clipboardData).getData('text');
  // 按空白字符分割，提取第一个非空内容
  const firstSegment = clipText.trim().split(/\s+/)[0] || '';
  // 将提取的内容插入到输入框光标位置，如需直接覆盖输入框所有内容可替换为 inputEle.value = firstSegment
  document.execCommand('insertText', false, firstSegment);
});
</script>

关键逻辑说明 #

• 如果你复制的内容是带样式的富文本，调用getData('text')会自动剥离所有HTML标签，仅提取纯文字内容，你举的例子中复制<strong>Lorem Lipsum Test</strong>时，会先拿到纯文本Lorem Lipsum Test再做分割
• 分割规则可按需调整，当前用/\s+/匹配任意空白字符（空格、换行、制表符等），如果需要按逗号、分号等其他符号分割，替换split的入参即可
• 如果你需要保留第一个内容的富文本标签，可将getData('text')替换为getData('text/html')，再解析HTML结构提取对应节点内容即可，示例逻辑如下：

// 保留富文本标签的提取逻辑，替换上方paste事件内的内容提取部分即可
const clipHtml = (event.clipboardData || window.clipboardData).getData('text/html');
const tempContainer = document.createElement('div');
tempContainer.innerHTML = clipHtml;
// 提取第一个文本段
const firstText = tempContainer.textContent.trim().split(/\s+/)[0] || '';
// 如需保留第一个元素的完整标签，可使用下行代码代替
// const firstContent = tempContainer.firstElementChild?.outerHTML || '';
document.execCommand('insertText', false, firstText);

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