0

What i have

  1. Create a title (input), body (input) and a mention user (input), 3 separated inputs

What i want

I want to create a mentioned functionality to a post like facebook,twitter where in the body you can add user to mention using @ (users are aplhanumeric only)

What have i done?

  1. search users when press @ key and added to post body (the process to show users bla bla)

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

What i need?

I have no clue which is the best way how to extract that @username1 @username2 added to the post body to later insert it in the mentioned database, maybe:

  1. Regex?
  2. another one??

Tech used > Vue and Node

Any articles or information to this matter will be appreciated

1 Answer 1

1

I think a Regex is a good solution.

I write a codepen with an example

PREVIEW:

enter image description here

CODE:

<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>
9
  • I tried and it works perfectly, by the way, when we make a get request to see the posts, i can use regex to create a a html tag to create that @username clickable? Commented Jul 4, 2020 at 15:35
  • Yes, you can use regex + replace for that purpose, adding tag a to mention users: <a> @user </a> Commented Jul 4, 2020 at 15:39
  • any example? i really never tried regex before. If you want the points, i can make another question, its ok for you ? Commented Jul 4, 2020 at 15:41
  • Yes, I can write an example for you. I will write another codepen. If you can, make another question, I will share the example with you when its done. Commented Jul 4, 2020 at 19:28
  • Here the codepen with the replace example: codepen.io/cincarnato/pen/wvMyzEx Commented Jul 4, 2020 at 19:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.