如何在Workshop应用中实现Contour的Excel内容拆分筛选功能？

核心思路：监听粘贴事件+解析剪贴板内容 #

直接上可落地的实现步骤，适配你提到的文本区域方案：

• 1. 绑定粘贴事件，接管剪贴板内容
  给筛选器的输入/文本区域绑定paste事件，阻止默认粘贴行为，手动读取并处理内容：

// 假设你的文本区域ID是filter-textarea
const textArea = document.getElementById('filter-textarea');
textArea.addEventListener('paste', (e) => {
  e.preventDefault();
  // 读取剪贴板文本（兼容不同浏览器）
  const clipboardText = e.clipboardData?.getData('text') || window.clipboardData?.getData('text');
  if (!clipboardText) return;
  processExcelContent(clipboardText);
});

• 2. 解析Excel复制的列表内容
  Excel复制的多行内容会带换行符（Windows是\r\n，Mac是\n），部分场景还会有制表符，用正则拆分并过滤空项：

function processExcelContent(rawText) {
  // 按换行/制表符拆分，同时过滤空行和首尾空格
  const splitItems = rawText.split(/[\n\t\r]/).filter(item => item.trim().length > 0);
  // 去重（可选，根据你的筛选器需求决定）
  const uniqueItems = [...new Set(splitItems.map(item => item.trim()))];
  // 将处理后的项注入筛选器
  injectToFilter(uniqueItems);
}

• 3. 将拆分后的项添加到筛选器
  根据你Workshop应用的筛选器UI结构，把生成的项转换成对应的交互元素（比如多选标签、复选框）：

function injectToFilter(items) {
  const filterContainer = document.getElementById('filter-options-container');
  items.forEach(item => {
    // 示例：创建带选中状态的筛选标签
    const tag = document.createElement('span');
    tag.className = 'filter-tag';
    tag.textContent = item;
    tag.dataset.value = item;
    // 绑定移除标签的逻辑（可选）
    tag.addEventListener('click', () => tag.remove());
    
    filterContainer.appendChild(tag);
  });
  // 触发筛选逻辑更新
  updateFilterResults();
}

• 4. 适配文本区域手动输入场景
  如果用户不是粘贴而是手动输入多行内容，可在文本区域失焦时触发同样的处理逻辑：

textArea.addEventListener('blur', () => {
  if (!textArea.value) return;
  processExcelContent(textArea.value);
  textArea.value = ''; // 清空文本区域
});

注意细节 #

• 测试不同系统的Excel复制格式，确保\r\n和\n都能被正确拆分；
• 如果你的筛选器已有选项列表，可在注入前做匹配，只添加不存在的项；
• 若遇到合并单元格的复制内容，可能需要额外处理格式异常（比如重复内容）。

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