1

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>
Community
  • 1
  • 1
Jignesh Raval
  • 587
  • 7
  • 15
  • 3
    If you're self-answering (and thank you for doing that), you should post an actual answer rather than including the "answer" in the question body. This helps it show up correctly and lets future user's know that this question has an answer at a glance – Vlad274 Jul 20 '18 at 13:52
  • 1
    Hi @Vlad274, thanks for suggestion and indicating my mistake. As I am very new to Stack Overflow, so I don't know how to use this platform properly. Can you please briefly guide me how to do that when I want to post Question with self-answerting. That will be your great help. – Jignesh Raval Jul 24 '18 at 11:10
  • 1
    No worries! When posting a new question there is a "Answer your own question" checkbox. If you check this, a second input field will appear and you can enter your answer there. For this question, you can edit the question and just add your answer in the "Your Answer" box below. – Vlad274 Jul 24 '18 at 12:49
  • 1
    Thank you very much @Vlad274, for your great help. this is now much clear. Thanks again. – Jignesh Raval Jul 25 '18 at 15:45
  • I tried to change it using Edit, but not getting checkbox. but no issue will take care of this for new question if self answering. – Jignesh Raval Jul 25 '18 at 15:47

0 Answers0