Question

我是编程新手。我想在用户在输入字段中输入的@字符之后和下一个空格之前检索字符串。例如，采取这样的事情：

somestring @user输入

我想在这里提取字符串“ user”。

我有一个输入字段，用户输入的输入以文本状态存储。然后，每当用户在输入字段中输入@时，我要显示带有用户列表的下拉列表。现在，当用户在@字符之后输入任何内容时，我要根据该字符串过滤用户。

当前，此文本状态包含整个用户输入。

现在，当我根据文本状态过滤用户列表时，它会返回一个空数组，因为我正在过滤整个字符串。

下面是我为尝试解决该问题而编写的代码：

class UserMention extends react.PureComponent {
    state = {
        text='',
        user_mention=false,
    };

    user_list = [
        {name: 'user1'},
        {name: 'first_user'},
        {name: 'second_user'},
    ];

    handle_input_change = (event) => {
        let user_mention;
        if (event.target.value.endsWith('@')) {
            user_mention = true;
        } else {
            user_mention = false;
        }

        this.setState({
            is_user_mention: is_user_mention,
            [event.target.name]: event.target.value,
        });
     }  

     render = () => {
         return {
             <input
                  required
                  name="text"
                  value={this.state.text}
                  onChange={this.handle_input_change}
                  type="text"/>
              {this.state.user_mention &&
                  <div>
                      {this.user_list.filter(user => 
                          user.user_name.indexOf(this.state.new_comment) 
                          !== -1).map((user,index) => (
                              <div key={index}>{user.name}
                              </div>
                          )) 
                       }
                   </div>
               }
           );};}

Answer 1

使用lastIndexOf查找字符串中@的最后一个索引，并从该索引开始获取substr。然后，您可以split在空白处仅提取用户：

const getUser = s => s.includes('@') && s.substr(s.lastIndexOf('@') + 1).split(' ')[0]

const log = console.log
log(getUser('@user1'))
log(getUser("@user1 enters some text to @user2"))
log(getUser('@user1 enters text @user3 more'))
log(getUser('@@@@user4'))
log(getUser('no at sign'))

如何使用JavaScript在@字符之后和空格之前检索字符串或进行反应？

1 个答案: