如何使用javascript或者在空格之前检索@字符之后的字符串？

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 。 然后，您可以拆分空间以仅提取用户：

 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'))