时间戳

首页 > 解决方案 > 对文本有更多控制的 TextArea 的替代品？

javascript - 对文本有更多控制的 TextArea 的替代品？

问题描述

我正在做一个聊天项目，并且大部分都完成了我需要的一切。我的聊天框是一个文本区域，在大多数情况下它都可以工作，直到我想通过使用正则表达式来实现更改聊天框中某些单词的颜色。

但是看看我是如何设置的：

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 在它们的值中包含文本，但文本不是 textarea 中的元素，所以我无法选择哪些文本获得样式。从一些研究中，我看到我想要做的事情是不可能用 textarea 做的。另一种选择是什么，我假设一个可以容纳文本元素的 div 容器？

标签： javascripthtmlregex

解决方案

使用，<div>带contenteditable属性。

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

</div>

推荐阅读