mentions.js

const response = [{
	"id": 342,
	"text": "@jetmir99 ckemi si je @rinordreshaj @flospa",
	"project_id": 114,
	"user_id": 912,
	"parent_id": null,
	"created_at": "2020-07-17 08:40:02",
	"updated_at": "2020-07-17 08:40:02",
	"deleted_at": null,
	"thx_count": 0,
	"reply_count": 2,
	"is_liked": false,
	"user": {
	"id": 912,
	"name": "Jetmir Avdullahu",
	"username": "jetmir99",
	"email": "[email protected]",
	"media_id": null,
	"has_password": false,
	"following_state": null,
	"has_instagram_connected": true,
	"media_url": "https://dev.yeswetrust.com/img/def/default-user.png",
	"has_active_membership": true
	},
	"replies": [
	{
	  "id": 343,
	  "text": "qe mire ti 😂",
	  "project_id": 114,
	  "user_id": 602,
	  "parent_id": 342,
	  "created_at": "2020-07-17 08:40:28",
	  "updated_at": "2020-07-17 08:40:28",
	  "deleted_at": null,
	  "thx_count": 0,
	  "reply_count": 0,
	  "is_liked": false,
	  "user": {
	    "id": 602,
	    "name": "Florent Spaa",
	    "username": "flospa",
	    "email": "[email protected]",
	    "media_id": "W4Ap5VAW6QOLTpyvqp03rTySVbnePoeL_image.jpg",
	    "has_password": false,
	    "following_state": "not_following",
	    "has_instagram_connected": false,
	    "media_url": "https://ywt-fra1.s3.amazonaws.com/W4Ap5VAW6QOLTpyvqp03rTySVbnePoeL_image.jpg",
	    "has_active_membership": true
	  }
	},
	{
	  "id": 344,
	  "text": "@flospa po i shpejt :P",
	  "project_id": 114,
	  "user_id": 912,
	  "parent_id": 342,
	  "created_at": "2020-07-17 08:41:47",
	  "updated_at": "2020-07-17 08:41:47",
	  "deleted_at": null,
	  "thx_count": 0,
	  "reply_count": 0,
	  "is_liked": false,
	  "user": {
	    "id": 912,
	    "name": "Jetmir Avdullahu",
	    "username": "jetmir99",
	    "email": "[email protected]",
	    "media_id": null,
	    "has_password": false,
	    "following_state": null,
	    "has_instagram_connected": true,
	    "media_url": "https://dev.yeswetrust.com/img/def/default-user.png",
	    "has_active_membership": true
	  }
	}
	]
}]

const pattern = /@[A-Za-z0-9_-]*/g;


const formatMentions = text => (text.match(pattern) || [])
								 .reduce((comment, mention) => comment = comment.replace(mention, `<span>${mention}</span>`), text)

 //text.replace(mentionsPattern, `<span>${mentionsPattern}</span>`);

for(i=0; i < response.length; i++) {
	console.log({comment: formatMentions(response[i].text) })

	for(j=0; j < response[i].replies.length; j++) {
		console.log({reply: formatMentions(response[i].replies[j].text) })		
	}
}