JSFiddle - React, Tailwind, and code Playground

Parse message

by id0

HTML

<div class="plain"></div>
<div class="parsed"></div>

SCSS

body {
  font-size: 20px;
}

.b-mention {
  &-preposition {
    &.to {
      color: #9fa2a4;
    }
    
    &.private {
      color: #e50000;
    }
  }
  
  &-brace {
    &.to {
      color: #9fa2a4;
    }
    
    &.private {
      color: #e50000;
    }
  }
  
  &-name {
    font-weight: bold;
    padding: 0 4px;
    
    &.to {
      color: #005291;
    }
    
    &.private {
      color: #e50000;
    }
  }
}

JavaScript

const input = 'to [some name] to [you] hello private [Дядя Саша] Ты где?';

$('.plain').html(input);

function replace_to(match, p1) {
  return `
  	<span class='b-mention to'>
      <span class='b-mention-preposition to'>to</span>
      <span class='b-mention-brace to'>[</span><span class='b-mention-name to'>${p1}</span><span class='b-mention-brace to'>]</span>
    </span>
  `;
}

function replace_private(match, p1) {
  return `
  	<span class='b-mention private'>
      <span class='b-mention-preposition private'>private</span>
      <span class='b-mention-brace private'>[</span><span class='b-mention-name private'>${p1}</span><span class='b-mention-brace private'>]</span>
    </span>
  `;
}

const regex = {
	to: /to \[(.+?)\]/g,
  private: /private \[(.+?)\]/g,
}

const parsed = input
								.replace(regex.to, replace_to)
								.replace(regex.private, replace_private);

function find_to(match, p1) {
  return p1;
}
                
let find_to_array = input.match(regex.to);
if (Array.isArray(find_to_array)) {
	find_to_array = find_to_array.map(i => i.replace(regex.to, (match, p1) => p1) );
}
console.log('find_to_array:', find_to_array);
                
let find_private_array = input.match(regex.private);
if (Array.isArray(find_private_array)) {
  find_private_array = find_private_array.map(i => i.replace(regex.private, (match, p1) => p1) );
}
console.log('find_private_array:', find_private_array);

$('.parsed').html(parsed);