How can i convert from string to emoji in typescript/javascript

Question

Hello i want to convert the emoji from string in typescript to show emoji in html.

Typescript file

export class Example {
    emoji:any;
    function(){
       this.emoji = ":joy:"
    }
  }

in HTML file i want it to be like 😂 (this is the element emoji which i will get from the typescript file) Is something like this possible and how. All help is appreciated

Answer 1

Firstly, you need some sort of mapping of :joy: to relevant unicode string.

For example: The unicode code for :joy: would be &#x1f602 .

You can then use this to print on the page...

Here's a little example.

 var mapping = { ":joy:" : "&#x1f602", ":shades:": "&#x1f60e", ":happy:" : "&#x1f600" } var iteration = 0; function mapEmoji(){ setInterval(function(){ if(iteration == Object.keys(mapping).length) iteration = 0; var text = Object.keys(mapping)[iteration]; document.getElementById("emoji").innerHTML = mapping[text]; iteration++; }, 500); } mapEmoji(); 

 <div id="emoji"> </div> 

Of course you'll want to add more emojis to your unicode mapping object and you probably will want something to replace the placeholders (":joy:") with corresponding unicode code to replace within a sentence etc...

Answer 2

Here is a function that with an emoji map and a regular expression would replace them in text:

 const emojiMap = { joy: "&#x1f602", shades: "&#x1f60e", happy: "&#x1f600" } const regExpression = /:([^:]*):/g const text = "I was like :joy: and she was like :happy: and we ware like :shades:" const emojiIt = (re, text) => { while (result = re.exec(text)) { text = text.replace(result[0], emojiMap[result[1]]) } return text } document.getElementById('test').innerHTML = emojiIt(regExpression, text) 

 <div id="test"></div> 

Since we are matching between the : we get the matched words form the regEx and then we use those (without the : since we tap into the group with index [1]) to get the appropriate html value.

PS. Thanks to Adriani6 for the convenient html representation of the emojis!