可以替代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);

我已经认识到textarea以其值保存文本，但是text不是textarea内的元素，因此我无法选择要选择样式的文本。从一些研究中，我发现我想做的事情不可能通过textarea实现。如果我假设一个可以容纳文本元素的div容器，那将是另一种选择？

Answer 1

使用xps = np.logspace(-4, 4, 1000)和SELECT SUBSTRING('Admin use only - Enterprise:Human Resources:Test - History', 17, 32) AS ExtractString; Result = Enterprise:Human Resources:Test 属性。

<div>

contenteditable

Answer 2

contenteditable Attribute

重构了函数，但是我不得不猜测一些参数。用过Template Literals，它们是类固醇上的字符串-它们应该是您处理所有这些文本的最好的朋友。方法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>