React Native中如何提取TextInput内的hashtag并通过useState存入数组

实现逻辑 #

• 绑定TextInput的输入变化事件，实时获取输入内容
• 通过正则全局匹配所有符合规则的话题标签
• 用useState分别维护输入文本、提取到的标签数组两个状态，自动处理无标签、重复标签的边界情况

可直接运行的代码 #

import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';

const HashtagInput = () => {
  const [text, setText] = useState('');
  const [hashtags, setHashtags] = useState([]);

  const onInputChange = (inputVal) => {
    setText(inputVal);
    // 匹配所有#开头、后续无空格/井号的连续字符，无匹配时返回空数组
    const tagList = inputVal.match(/#[^\s#]+/g) ?? [];
    // 去重后更新标签状态
    setHashtags(Array.from(new Set(tagList)));
  };

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        value={text}
        onChangeText={onInputChange}
        placeholder="输入内容，通过#添加话题"
        style={{ borderWidth: 1, borderColor: '#eee', padding: 12, borderRadius: 6 }}
      />
      <Text style={{ marginTop: 12 }}>提取结果：{JSON.stringify(hashtags)}</Text>
    </View>
  );
};

export default HashtagInput;

效果验证 #

输入文本为Hello world, #Good #morning时，最终得到的hashtags数组结果完全符合预期：

['#Good', '#morning']

注意点 #

• 正则/#[^\s#]+/g会自动过滤掉无效标签，比如##、# 带空格的错误标签这类内容不会被识别
• 用空值合并运算符??处理无匹配标签的场景，避免match返回null导致后续数组操作报错
• 借助Set做自动去重，即使用户多次输入同一个标签，数组里也只会保留一份

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