如何提取帖子中提到的用户？ (VUE-节点)

Question

我有什么

1. 创建标题（输入）、正文（输入）和提及用户（输入），3 个单独的输入

我想要什么

我想为 facebook、twitter 等帖子创建提及的功能，在正文中您可以使用 @ 添加要提及的用户（用户仅限字母数字）

我做了什么？

1. 按@键搜索用户并添加到帖子正文（显示用户bla bla的过程）

   输入 v-on:keyup.50="searchUsers()" type="text"

我需要什么？

我不知道如何提取 @username1 @username2 添加到帖子正文以便稍后将其插入到提到的数据库中的最佳方法是：

1. 正则表达式？
2. 另一个？？

使用的技术 > Vue 和 Node

任何与此相关的文章或信息将不胜感激

Answer 1

我认为正则表达式是一个很好的解决方案。

我写了一个codepen的例子

预览：

代码：

<template>
  <div id="app">
    <input type="text" 
           v-model="title" 
           placeholder="title" 
    />
    <br><br>
    <textarea rows="20" 
              cols="30"
              v-model="body"
    ></textarea>
    
    <div>
      <h3>Mention users </h3>
      {{mentionUsers}}
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      title: null,
      body: "Hello, bla bla bla @jrambo bla bla bla @jwick bla bla bla @cincarnato",
      mentionUsers: []
    };
  },
  methods: {
    identifyMentionUsers() {
      this.mentionUsers = this.body.match(/@\w+/g);
    }
  },
  mounted(){
    this.identifyMentionUsers()
  },
  watch: {
    body(val){
      this.identifyMentionUsers()
    }
  }
};
</script>