Flutter TextField中如何移除带关联单词的Hashtag？

我需要捕获所有带#符号的单词，将其添加到列表并从TextFormField中移除。试过各种方案，甚至用ChatGPT调试，都没解决——代码第一次运行正常，但之后只能捕获#后的第一个字母。

预期效果：

实际效果：

原代码 #

控制器与监听方法

TextEditingController _controller = TextEditingController();
List<String> _removedWords = [];

@override
void initState() {
  super.initState();
  _controller.addListener(_removeHashtagWord);
}

void _removeHashtagWord() {
  String text = _controller.text;

  if (text.contains('#') && text.endsWith(' ')) {
    RegExp hashtagPattern = RegExp(r'#\S+\b');
    Iterable<RegExpMatch> matches = hashtagPattern.allMatches(text);

    if (matches.isNotEmpty) { 
      RegExpMatch match = matches.first;
      String removedWord = match.group(0)!;
      print(removedWord);

      setState(() {
        _removedWords.add(removedWord);
        _controller.text = text.replaceFirst(removedWord, '');
        text = _controller.text;
        _controller.selection = TextSelection.collapsed(
          offset: match.start,
        );
      });
    }
  }
}

Build函数

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        TextField(
          controller: _controller,
          decoration: const InputDecoration(hintText: 'Type here...'),
        ),
        const SizedBox(height: 16),
        const Text('Removed words:'),
        const SizedBox(height: 8),
        Expanded(
          child: ListView.builder(
            itemCount: _removedWords.length,
            itemBuilder: (context, index) {
              return Text(_removedWords[index]);
            },
          ),
        ),
      ],
    ),
  );
}

问题原因 #

1. 重复触发监听：修改_controller.text后会再次触发_removeHashtagWord，导致逻辑循环，后续捕获逻辑混乱。
2. 正则匹配与光标位置错误：matches.first总是取第一个匹配项，替换后光标位置计算未考虑文本变化，导致后续输入时匹配范围错误。
3. 替换逻辑不严谨：仅替换匹配的单词，残留的空格会干扰后续匹配。

修复方案 #

添加处理状态标记避免重复触发，调整正则匹配最后一个输入的hashtag，优化替换与光标定位逻辑：

TextEditingController _controller = TextEditingController();
List<String> _removedWords = [];
bool _isProcessing = false; // 新增：防止重复触发监听

@override
void initState() {
  super.initState();
  _controller.addListener(_removeHashtagWord);
}

void _removeHashtagWord() {
  if (_isProcessing) return; // 正在处理时直接返回，避免循环
  String text = _controller.text;

  if (text.contains('#') && text.endsWith(' ')) {
    // 匹配结尾空格前的#开头单词，确保只捕获最后输入的hashtag
    RegExp hashtagPattern = RegExp(r'#\S+(?=\s$)');
    final match = hashtagPattern.firstMatch(text);
    
    if (match != null) { 
      String removedWord = match.group(0)!;
      print(removedWord);

      setState(() {
        _isProcessing = true;
        _removedWords.add(removedWord);
        // 替换匹配的单词及末尾空格，避免残留
        _controller.text = text.replaceRange(match.start, text.length, '');
        // 光标定位到原匹配起始位置
        _controller.selection = TextSelection.collapsed(offset: match.start);
        _isProcessing = false;
      });
    }
  }
}

修复说明 #

• _isProcessing标记：防止修改控制器文本后重复触发监听，避免逻辑循环。
• 正则优化：r'#\S+(?=\s$)'精准匹配输入空格前的hashtag单词，确保只处理刚输入的目标内容。
• 替换逻辑：使用replaceRange替换从匹配起始到文本末尾的内容，同时移除触发用的空格，避免残留干扰。
• 光标定位：保持光标在原hashtag起始位置，符合输入习惯。

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