如何在JavaScript中改变聊天消息文本特定部分的颜色？

你当前的代码把整个消息内容作为单一文本节点，所以没法单独给不同部分设置样式。要实现分部分变色，需要把用户名和消息内容拆成独立的HTML元素（比如<span>），再分别设置样式。下面是两种实现方式：

原生JavaScript方案 #

// 创建li容器
const item = document.createElement('li');

// 构建用户名元素
const usernameEl = document.createElement('span');
usernameEl.textContent = '[Anye]: ';
usernameEl.style.fontWeight = 'bold';
usernameEl.style.color = 'red';

// 构建消息内容元素（支持用户自定义内容）
const messageEl = document.createElement('span');
const userInputMessage = 'hello'; // 这里替换成用户输入的消息内容
messageEl.textContent = userInputMessage;
messageEl.style.color = '#333'; // 自定义消息内容的颜色

// 将两个元素添加到li中
item.appendChild(usernameEl);
item.appendChild(messageEl);

// 最后把li添加到聊天列表容器（假设容器id是chat-list）
document.getElementById('chat-list').appendChild(item);

jQuery方案 #

如果用jQuery会更简洁，适合快速开发：

// 模拟用户输入的用户名和消息内容
const username = 'Anye';
const userMessage = 'hello';

// 创建li并拼接带样式的子元素
const $messageItem = $('<li>')
  .append($('<span>')
    .text(`[${username}]: `)
    .css({
      fontWeight: 'bold',
      color: 'red'
    })
  )
  .append($('<span>')
    .text(userMessage)
    .css({
      color: '#333'
    })
  );

// 添加到聊天容器
$('#chat-list').append($messageItem);

额外优化建议 #

• 始终用textContent（原生）或text()（jQuery）插入用户输入的内容，避免使用innerHTML或html()，防止XSS注入攻击。
• 样式推荐通过CSS类管理，比内联样式更易维护：

  .chat-username {
    font-weight: bold;
    color: red;
  }
  .chat-message {
    color: #333;
  }
  

  代码中给元素添加类名即可：usernameEl.classList.add('chat-username')（原生）或$('<span>').addClass('chat-username')（jQuery）。

内容的提问来源于stack exchange，提问作者TheHaloDeveloper