How to Restrict or Remove Emojis or Emoji-cons from Textarea on Input box using JavaScript and Angular4+

Question

Here I want to post my Answer of the above question because the same issue I was facing but didn't find complete answer.

After doing R&D, Mix and merge various code snippets available on stack overflow and testing it, I have found following answer. I am not sure that this will resolve all your emoji icons related issue but for now it is working for almost many icons. I hope below snippet will help you.

I am also thankful to all those who provide guidance through Stack Overflow or through blog posts.

Note: As Emojis or Emoticons are Unicode characters and are in very wide range. They are also dynamic and adding more and more emojis every year. So I have tried to cover and restrict as much emoji icon codes as possible by mix and match of various examples available on internet through JavaScript Regular Exp..

So we need to revisit or reevaluate current functionality when a new range introduces or any uni-codes which are not covered.

I also want to give you some detail about errors and it's solution which I faced while building AOT and in running test case in Angular 4+

In Angular 4, when you will run "npm run test-headless" or AOT build using Phantomjs and Typescript gives following error:

1. when use "u" flag in regex will get : Syntax Error: Invalid flags supplied to RegExp constructor. -- Solution : remove "u" flag as it is not required due to this RegExp pattern

2. SyntaxError: Invalid regular expression: Range out of order in character class. -- Solution : escape all dashes - Ref: http://mrrena.blogspot.com/2009/02/invalid-range-in-character-class.html ( Thanks a lot for this fix which make this working in Angular in AOT build )

Taken below code from This stack overflow answer

// escape all dashes \-    
return this.replace(/([\uE000-\uF8FF]|\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDDFF])/g, '')

let myinput = document.querySelector('#myinput');

let output = document.querySelector('#output');

myinput.addEventListener('keypress', function() {
  removeInvalidChars();
});

myinput.addEventListener('blur', function() {
  removeInvalidChars();
})

function removeInvalidChars() {
  var str = myinput.value;

  str = str.replace(/(?:[\u2700\-\u27bf]|(?:\ud83c[\udde6\-\uddff]){2}|[\ud800\-\udbff][\udc00\-\udfff]|[\u0023\-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70\-\udd71]|\ud83c[\udd7e\-\udd7f]|\ud83c\udd8e|\ud83c[\udd91\-\udd9a]|\ud83c[\udde6\-\uddff]|\ud83c[\ude01\-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32\-\ude3a]|\ud83c[\ude50\-\ude51]|\u203c|\u2049|[\u25aa\-\u25ab]|\u25b6|\u25c0|[\u25fb\-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600\-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9\-\u23f3]|[\u23f8\-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190\-\u21ff]|[\uE000\-\uF8FF]|\uD83C[\uDF00\-\uDFFF]|\uD83D[\uDC00\-\uDDFF])/g, '').replace(/[^A-Za-z0-9\w\.,\?""!@#\$%\^&\*\(\)\-_=\+;:<>\/\\\|\}\{\[\]`~\s\']*/g, '');

  //str = str.replace(/./,"");

  //str = str.replace(/[^\w\.,\?""!@#\$%\^&\*\(\)-_=\+;:<>\/\\\|\}\{\[\]`~\s]*/g,"")

  console.log(str.length);

  output.innerHTML = str.trim();

  myinput.value = str;
}

<h3>Remove Emojis from Textarea</h3>
<textarea rows="10" cols="50" id="myinput" style="padding: 10px;"></textarea>
<br>

<div id="output" style="border: 1px solid blue; padding: 1em">OutPut</div>

<button id="mybtn" type="submit" value="Submit" style="padding: 10px;">Submit</button>

<p>You can find more emojis icons here for testing : <a href="https://jsfiddle.net/1v03Lqnu/12/" target="_blank">Emojis</a></p>