文本输入框中实时查找并移除Hashtag的实现问题求助

一、替换空格触发的低效查找方式 #

原有的“输入空格时检查最后一个单词”逻辑存在明显局限性：无法覆盖标点后无空格、删除操作等场景，推荐改用正则全量匹配+实时输入监听的方案，更高效且能覆盖所有文本变化场景。

核心实现思路 #

监听输入框的input事件（涵盖输入、删除、粘贴、剪切等所有文本变更操作），每次触发时用正则提取当前文本中所有符合规则的Hashtag，直接更新结果数组即可。

正则规则示例 #

根据需求调整，以下是支持中英文、数字、下划线的Hashtag匹配正则：

// 匹配以空格开头或位于文本开头的#，后面跟中英文、数字、下划线
const hashtagRegex = /(?:^|\s)#[\w\u4e00-\u9fa5]+/g;

二、解决删除时的Hashtag同步问题 #

通过全量匹配的方式，天然解决删除场景下的Hashtag移除问题：当用户删除某个Hashtag的全部内容时，正则匹配结果中会自动剔除该Hashtag，直接替换原数组即可完成同步。

完整代码示例 #

// 初始化存储Hashtag的数组
let hashtags = [];
const inputBox = document.getElementById('target-input');

// 支持中英文的Hashtag匹配正则
const hashtagRegex = /(?:^|\s)#[\w\u4e00-\u9fa5]+/g;

// 监听输入变化（带防抖优化，避免高频计算）
let debounceTimer;
inputBox.addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const currentText = inputBox.value;
    // 提取所有匹配项并去除首尾空格（避免空格前缀）
    const matchedTags = (currentText.match(hashtagRegex) || []).map(tag => tag.trim());
    // 去重，避免重复Hashtag
    const uniqueTags = [...new Set(matchedTags)];
    // 同步更新Hashtag数组
    hashtags = uniqueTags;
    
    // 这里可添加后续业务逻辑，比如更新UI、提交数据等
    console.log('当前有效Hashtags:', hashtags);
  }, 200); // 200ms防抖间隔，可根据体验调整
});

关键优势 #

1. 覆盖全场景：不管是输入新Hashtag、删除部分文本、粘贴内容，都能准确同步Hashtag数组
2. 性能可控：正则匹配计算量极小，搭配防抖可进一步降低高频触发时的资源消耗
3. 规则灵活：正则可根据需求调整，比如允许Hashtag包含特殊字符、限制长度等

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