1

I've a problem with my RegEx to detect and wrap emojis into a wrapper. Somehow it's not working with skin tone colored emojis like in my example:

function wrap() {
  let emojiRegEx = /(?:[\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])/g;

  $(".wrapper").contents().unwrap();
  $("div").html(jQuery("div").html().replace(emojiRegEx, '<span class="wrapper" contenteditable="false">$&</span>'));
}
div {
  border: 1px solid;
}

.wrapper {
  font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true">Test </div>
<button onclick="wrap()">Wrap emojis to show error</button>

How can I fix this? I just want to wrap the emojis. Maybe there is a different - safer way?

Mr. Jo
  • 4,946
  • 6
  • 41
  • 100
  • 1
    Are you targeting any browser, including FF and IE? If not and you want to target the new ECMAScript 2018+ compliant regex engines, you may try `let emojiRegEx = /\p{Emoji}+/ug` – Wiktor Stribiżew May 01 '20 at 16:29
  • IE is not supported but all other browsers like FF, GC, SF – Mr. Jo May 01 '20 at 16:30
  • Whats should {Emoji} be? is this a valid regex? – Mr. Jo May 01 '20 at 16:31
  • 1
    `\p{Emoji}` is only supported in browsers that comply with ECMAScript 2018, see [the table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Browser_compatibility). FF does not support them. You may use [this pattern](https://stackoverflow.com/a/48148218/3832970) as a work-around. – Wiktor Stribiżew May 01 '20 at 16:38
  • @WiktorStribiżew I'm getting `Uncaught SyntaxError: Invalid or unexpected token` – Mr. Jo May 01 '20 at 16:49
  • 1
    See https://pastebin.com/S20EcK9d with the link (copy and paste into address bar) – Wiktor Stribiżew May 01 '20 at 16:56
  • @WiktorStribiżew Thanks a lot! Somehow it's now group-wrapping emojis that are after each other and not single wrapping each one. Do you have an idea? – Mr. Jo May 01 '20 at 17:00
  • 1
    I added `+` at the end, remove it if you do not need it. – Wiktor Stribiżew May 01 '20 at 17:01
  • @WiktorStribiżew What means the `+`? Just to understand everything – Mr. Jo May 01 '20 at 17:05
  • 1
    `+` is a quantifier that repeats a pattern that it quantifies 1 or more times. – Wiktor Stribiżew May 01 '20 at 17:10
  • @WiktorStribiżew Ah okay. So something like a single run instead looping. I'll try now if everything works with all emojis and everything. Thanks a lot! – Mr. Jo May 01 '20 at 17:11
  • @WiktorStribiżew Do you may know a list with all emojis I can copy and paste with all variations to test my function? – Mr. Jo May 01 '20 at 17:29
  • 1
    I already did this text for Unicode Emoji v.12.1. See https://regex101.com/r/dQEURi/30. See [my answer again](https://stackoverflow.com/a/48148218/3832970). – Wiktor Stribiżew May 01 '20 at 17:30
  • Nice one! Found out that the colored kissing couple is not supported yet: / <- in every color. Everything else works awesome! Just to inform you. – Mr. Jo May 01 '20 at 17:39
  • I've tried to add the missing emoji but I'm always destroying the regex. Sorry :( I thought I can help – Mr. Jo May 01 '20 at 21:17
  • 1
    Sorry, I can't re-create the regex for the [Version 13.0](https://unicode.org/Public/emoji/13.0/emoji-test.txt). I need access to another PC, and due to COVID19, I can't go there. I can create a regex for that, too, but it will be "uncompressed", i.e. longer than could be. – Wiktor Stribiżew May 01 '20 at 21:19
  • Oh okay no problem. I'll use the old one until I've heard something new. Where can I subscribe too so that I knew when you change something? I really appreciate your work and the current situation. – Mr. Jo May 01 '20 at 22:06
  • 1
    There is a *follow* option now. So, it was not you who downvoted my two answers at a stretch, [this](https://stackoverflow.com/questions/61525790/javascript-match-get-all-class-names-with-numbers-in-them/61525847#61525847) and [this](https://stackoverflow.com/questions/61415093/extract-capture-group-only-from-string/61418347#61418347)? – Wiktor Stribiżew May 01 '20 at 22:30
  • No I upvoted it. Why should I do this? You helped a lot and 2 emojis are not a big problem. I've followed your answer and looking forward for v13 – Mr. Jo May 02 '20 at 06:57
  • 1
    Sorry, did not mean to blame you, just asked. Just it was so meaningless, to downvote correct working solutions. – Wiktor Stribiżew May 02 '20 at 08:15
  • @WiktorStribiżew Sure, this is not fair. I've followed your RegEx answer so I'll get a notice as soon as you go back to this. – Mr. Jo May 02 '20 at 09:53

0 Answers0