用HTML替换字符串文本

Question

I'm trying to implement emoticons so for example :happy: should display an emoticon. However, the text is sanitized and does not generate the actual html.

How can I replace certain strings such as :happy: with html image?

Current attempt (replace :happy: with html):

  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)

Update:

I think something like text.splitText() should be used here. But I'm trying to find the best way to find the text, then split it.

Answer 1

Use .html() to have an element effect. .text() will just put the content without having any HTML effect

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

Answer 2

You can use a single detached DOM element to sanitize the inputs, then convert strings to images.

Done by setting Node.textContent [ mdn ] and getting Element.innerHTML [ mdn ] on the detached node.
Then using String.prototype.replace() [ mdn ] method on the resulting string.

This is library free .

 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>