Альтернатива TextArea с большим контролем над текстом?

Question

Я работаю над проектом чата и в основном закончил все, что мне было нужно.Мой блок чата - это текстовое поле, и по большей части он работает, пока я не хотел реализовать изменение цвета определенных слов в окне чата с помощью регулярных выражений.

Но, глядя на то, как я это настроил:

function writeMessageToChatBox(message, from, serverMessage=false, direct=false){
        let chat_box = $('#chatbox');
        let val = chat_box.val();
        if(!serverMessage){
            if(direct){
                console.log(replay);
                if(replay){
                    chat_box.val(val + '[Whisper to: ' + tempRecepient + ' ] ' + from + ": " + message + "\n" );
                    replay = false;
                    tempRecepient = undefined
                }
                else{
                    chat_box.val(val + '[Whisper from: ' + from + ' ] ' + from + ": " + message + "\n" );
                }
            }
            else{
                chat_box.val(val + from + ": " + message + "\n");
            }
        }
        else{
            chat_box.val(val + message + "\n");
        }
        chat_box.scrollTop(document.getElementById("chatbox").scrollHeight);

Я пришел к выводу, что текстовые области содержат текст внутри них в своем значении, но текст не является элементами внутри текстовой области, поэтому я не могу выбрать, какой текст получает стиль.Из некоторых исследований я понял, что то, что я пытаюсь сделать, невозможно с текстовой областью.Какой еще вариант, я полагаю, контейнер div, который может содержать текстовые элементы?

Answer 1

contenteditable Атрибут

Рефакторинг функции, но мне пришлось угадывать некоторые параметры.Используется Шаблонные литералы , которые представляют собой строки на стероидах - они должны быть вашим лучшим другом, имеющим дело со всем этим текстом.Метод html() широко используется, поэтому разметка может быть напечатана или вставлена ​​в виде строки.

Демо

function writeMessage(message, from = '', reply = '', serverMessage = false, direct = false) {
  let tempRx = '';
  let chat = $('.chatbox');
  let val = chat.text();
  if (!serverMessage) {
    if (direct) {
      console.log(reply);
      if (reply) {
        chat.html(`${val} <mark>[Whisper to: ${tempRx} ]</mark> ${from}: ${message}<br>`);
        reply = false;
        tempRx = undefined;
      } else {
        chat.html(`${val} <mark>[Whisper from: ${from} ]</mark> ${from}: ${message}<br>`);
      }
    } else {
      chat.html(`${val} ${from}: ${message}<br>`);
    }
  } else {
    chat.html(`${val} ${message}<br>`);
  }
  chat.scrollTop(chat[0].scrollHeight);
}

writeMessage(`Whispering, whisper test, mumble test, <b style='color:red'>belch test</b>, ?`, `<b style='color:green'>Rusty</b>`, 'reply', false, direct = true);

<form id='main' name='main'>
  <fieldset class='chatbox' contenteditable='false'>
    <legend>Status: </legend>
  </fieldset>
  <fieldset class='chatbox' contenteditable>
  </fieldset>

</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Использование, <div> с атрибутом contenteditable.

.textarea{
  width:200px;
  height:50px;
  border:1px solid black;
}

<div class='textarea' contenteditable>

</div>