How to filter emojis from string jquery/javascript?

Question

I'm using the following to exclude emojis/emoticons from a string in php. How do I do the same with javascript or jQuery?

preg_replace('/([0-9|#][\x{20E3}])|[\x{00ae}|\x{00a9}|\x{203C}|\x{2047}|\x{2048}|\x{2049}|\x{3030}|\x{303D}|\x{2139}|\x{2122}|\x{3297}|\x{3299}][\x{FE00}-\x{FEFF}]?|[\x{2190}-\x{21FF}][\x{FE00}-\x{FEFF}]?|[\x{2300}-\x{23FF}][\x{FE00}-\x{FEFF}]?|[\x{2460}-\x{24FF}][\x{FE00}-\x{FEFF}]?|[\x{25A0}-\x{25FF}][\x{FE00}-\x{FEFF}]?|[\x{2600}-\x{27BF}][\x{FE00}-\x{FEFF}]?|[\x{2900}-\x{297F}][\x{FE00}-\x{FEFF}]?|[\x{2B00}-\x{2BF0}][\x{FE00}-\x{FEFF}]?|[\x{1F000}-\x{1F6FF}][\x{FE00}-\x{FEFF}]?/u', '', $text);

This is what I try to do

$('#edit.popup .btn.save').live('click',function(e) {
var item_id = $(this).attr('id');
var edited_text = $('#edit.popup textarea').val().replace(/([0-9|#][\x{20E3}])|[\x{00ae}|\x{00a9}|\x{203C}|\x{2047}|\x{2048}|\x{2049}|\x{3030}|\x{303D}|\x{2139}|\x{2122}|\x{3297}|\x{3299}][\x{FE00}-\x{FEFF}]?|[\x{2190}-\x{21FF}][\x{FE00}-\x{FEFF}]?|[\x{2300}-\x{23FF}][\x{FE00}-\x{FEFF}]?|[\x{2460}-\x{24FF}][\x{FE00}-\x{FEFF}]?|[\x{25A0}-\x{25FF}][\x{FE00}-\x{FEFF}]?|[\x{2600}-\x{27BF}][\x{FE00}-\x{FEFF}]?|[\x{2900}-\x{297F}][\x{FE00}-\x{FEFF}]?|[\x{2B00}-\x{2BF0}][\x{FE00}-\x{FEFF}]?|[\x{1F000}-\x{1F6FF}][\x{FE00}-\x{FEFF}]?/u, '');

$('#grid li.image#' + item_id + ' img').attr('data-text', edited_text);

});

I found this suggestion in another post on Stack Overflow, but it's not working. It's still allowing emojis from ex ios.

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

What I try to achieve is to not allow emojis in textfield, and if an emoji is inserted (from ex ios keyboard) it will be replaced by nothing. It works with php. Someone here who can help me out with this?

What version of jQuery are you using? `.live` was deprecated in 1.7 and removed in 1.9. [(reference)](http://api.jquery.com/live/) — Stryner, Oct 22 '14 at 12:40
I think it's generally a bad idea to filter emojis from a text field, we allow them in everything now a days -- file names, anything you can think of -- I wouldn't be surprised if they started popping up actual person names in the next couple of decades. — BrainSlugs83, Mar 11 '21 at 01:17

score 3 · Answer 1 · edited Mar 11 '21 at 01:12

3

Based on the answer from mb21, this regex did the job. No loop required!

/[\uD800-\uDBFF][\uDC00-\uDFFF]/g

edited Mar 11 '21 at 01:12

Erresen

1,923
1
22
41

answered Mar 10 '21 at 13:31

John Doe

41
4

1

Usage: `string = string.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,'');` – Avatar Apr 07 '21 at 05:22

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

As pointed out in this answer, JavaScript doesn't support Unicode code points outside the Basic Multilingual Plane (where iOS emojis lie).

I highly recommend reading The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!). Then you'll understand what was meant with:

So some indirect approach is needed. Cf. to JavaScript strings outside of the BMP.

For example, you could look for code points in the range [\uD800-\uDBFF] (high surrogates), and when you find one, check that the next code point in the string is in the range [\uDC00-\uDFFF] (if not, there is a serious data error), interpret the two as a Unicode character, and replace them by whatever you wish to put there. This looks like a job for a simple loop through the string, rather than a regular expression.

Joel's 2003 post is, well, from 2003. While solid foundational knowledge if working with languages other than JS, I would just recommend this instead: https://dmitripavlutin.com/what-every-javascript-developer-should-know-about-unicode/ — Preston PHX, May 29 '21 at 01:59

How to filter emojis from string jquery/javascript?

2 Answers2