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 = 'Кто-ото увернулся, кто-то отпрыгнул.';

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

function replace_to(match) {
  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'>${match}</span><span class='b-mention-brace to'>]</span>
    </span>
  `;
}

const regex = /отпрыгнул|уклонился|увернулся|отскочил/g;

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

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