用HTML替换字符串文本

Question

我正在尝试实现表情符号，例如:happy:应该显示表情符号。但是，文本已经过清理，并且不会生成实际的html。

如何用html图像替换某些字符串，例如:happy:？

当前尝试（用html替换:happy:）：

  var data = snapshot.val();
  var username = data.name || "anonymous";
  var message = data.text;

  // REPLACE STRING WITH IMAGE
  message = message.replace(":happy:", "<img src='https://s3-us-west-1.amazonaws.com/static/emoticons/1.0.jpg'>");

  //CREATE ELEMENTS MESSAGE & SANITIZE TEXT
  var messageElement = $("<li>");
  nameElement.text(username);
  messageElement.text(": "+message).prepend(nameElement);

  //DISPLAY MESSAGE
  messageList.append(messageElement)

更新

我认为应该在这里使用像text.splitText()这样的东西。但我正在尝试找到find文本的最佳方式，然后split。

Answer 1

使用.html()产生元素效果。 .text()只会放置内容而不会产生任何HTML效果

messageElement.html(": "+message).prepend(nameElement);

Answer 2

您可以使用单个分离的DOM元素来清理输入，然后将字符串转换为图像。

通过在分离的节点上设置Node.textContent [mdn]并获取Element.innerHTML [mdn]来完成。
然后在结果字符串上使用String.prototype.replace() [mdn]方法。

这是免费图书馆。

var username = "anonymous",
    message = "Some text with an happy <b>emoticon</b> :happy: and a sad <i>emoticon</i> :sad:.",
    messageList = document.getElementById("messageList"),
    sanitizer = document.createElement("p");

  //CREATE ELEMENTS MESSAGE
  var messageElement = document.createElement("li");

  //SANITIZE TEXT
  sanitizer.textContent = message;
  message = sanitizer.innerHTML;

  //REPLACE STRING WITH IMAGE
  message = message.replace(":happy:", "<img src='https://s3-us-west-1.amazonaws.com/horde.tv/static/emoticons/1.0.jpg'>");
  message = message.replace(":sad:", "<img src='https://static-cdn.jtvnw.net/emoticons/v1/86/1.0'>");
  messageElement.innerHTML = username + ": " + message;

  //DISPLAY MESSAGE
  messageList.appendChild(messageElement);

<ul id="messageList"></ul>