CODEWITHSUNDEEP
javascripthtmlregex
Jude
Jude

Reputation: 451

Alternative to TextArea with more control over text?

I am working on a chat project, and have mostly finished everything that I needed. My chat box is a textarea and for the most part it works, until I wanted to implement changing the color of certain words in the chatbox by using regex.

But looking at how I have this set up:

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);

I've come to realize that textareas hold text within them in their value, but the text are not elements within the textarea so I cannot pick and choose which text gets style. From some research I saw that what I'm trying to do is not possible with a textarea. What would be another option, I assume a div container that can hold text elements?

Upvotes: 2

Views: 19467

Answers (2)

zer00ne
zer00ne

Reputation: 43910

contenteditable Attribute

Refactored the function but I had to guess on some parameters. Used Template Literals which are Strings on steroids -- they should be your best friend dealing with all that text. The method html() is used extensively so markup can be typed or inserted in as a string.

Demo

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>

Upvotes: 1

BadPiggie
BadPiggie

Reputation: 6359

Use, <div> with contenteditable attribute.

.textarea{
  width:200px;
  height:50px;
  border:1px solid black;
}
<div class='textarea' contenteditable>

</div>

Upvotes: 4

Related Questions