Convert emojione img html tag back to unicode

Question

I'm trying to create a function to replace all occurrences of <img> with emojione (not a fully word) in its class to its alt attribute, which contains the emoji unicode.

All <img> occorrences that don't have emojione in its class cannot be replaced.

What's wrong with my regex or code?

Thanks in advance!

Here is my code:

let input = $("#txInput")
let output = $("#txOutput")
let button = $("button")

input.text(
`
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<img alt="" class="emojione" title=":man_mechanic_tone1:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f468-1f3fb-1f527.png"/>

<img class="emojioneemoji" alt="‍" title=":man_mechanic_tone1:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f468-1f3fb-1f527.png"/>

<img class="emojioneemoji" alt="" title=":stuck_out_tongue_closed_eyes:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f61d.png"/>

<img class="emojioneemoji" alt="" title=":stuck_out_tongue_closed_eyes:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f61d.png">

<img class="emojioneemoji" alt="" title=":stuck_out_tongue_closed_eyes:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f61d.png"></img>

<img  alt="" class="emojioneemoji"title=":stuck_out_tongue_closed_eyes:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f61d.png"></img>

<img  alt="" class="emojioneemoji"title=":stuck_out_tongue_closed_eyes:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f61d.png"/>

"<p>test 123</p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f602.png"><br></p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f47d.png"><br></p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f44a.png"><br></p>"

"<p>test 321</p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f602.png"><br></p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f47d.png"><br></p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f44a.png"><br></p>"

<img ng-src="https://placeimg.com/640/480/any" title="3" alt="ooo" src="https://placeimg.com/640/480/any">
`
)

const emojioneImgToUnicode = function (txt) {
 let regex = /<img.*?alt="(.+?)"(?=class+.*=.*"*emojione*")[^\>]+?>(?:<\/img>)*/g,
      matched,
      result = txt;
  while ((matched = regex.exec(result)) !== null) {
   result = result.replace(matched[0], matched[1]);
  }
  console.log(result);
  return result;
};

button.on("click", function() {
  let out = emojioneImgToUnicode(input.val());
  output.text(out);
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

div {
  padding: 10px 0;
}

textarea {
  width: 100%;
  height: 100px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <textarea id="txInput"></textarea>
</div>
<button>Convert</button>
<div>
  <textarea id="txOutput"></textarea>
</div>

But still you could do this using dom elements - you probably have them in dom already so why not to use them — Maciej Kozieja, Feb 21 '19 at 19:35
Actually I don't have it in my DOM, because the text that needs to be replaced is from an user's input field. — Rafael Cruz, Feb 21 '19 at 19:39
Just find the emojis and `emoji.codePointAt(0).toString(16)` - if you need emoji hex values. — Wiktor Stribiżew, Feb 21 '19 at 20:51
Check https://jsfiddle.net/4n18e9s5/ demo, is that what you need? Or https://jsfiddle.net/b9fhwag5/1/? — Wiktor Stribiżew, Feb 21 '19 at 21:42
@WiktorStribiżew Thanks! Your first demo was exactly what I needed. Please post it as an answer so I can accept it. — Rafael Cruz, Feb 22 '19 at 11:45

score 2 · Accepted Answer · answered Feb 22 '19 at 12:04

You may use

.replace(/<img\s+(?=(?:[^>]*?\s)?class="[^">]*emojione)(?:[^>]*?\s)?alt="([^"]*)"[^>]*>(?:[^<]*<\/img>)?/gi, "$1")

See the regex demo.

Details

<img - a literal substring
\s+ - 1+ whitespaces (they will be there at least 1 since there must be attributes)
(?=(?:[^>]*?\s)?class="[^">]*emojione) - positive lookaehead that make sure that immediately to the right of the current location, there is
- (?:[^>]*?\s)? - an optional sequence of any 0+ chars other than > and then a whitespace
- class=" - a literal substring
- [^">]*emojione - any 0+ chars other than " and > and then emojione (the word inside class is thus checked for presence)
(?:[^>]*?\s)? - an optional sequence of any 0+ chars other than > and then a whitespace
alt=" - a literal substring
([^"]*) - Group 1 ($1 in the replacement pattern)
"[^>]*> - end of img tag: ", 0+ chars other than > and then >
(?:[^<]*<\/img>)? - an optional sequence of
- [^<]* - 0+ chars other than <
- <\/img> - a </img> substring.

Here is the JS demo:

var html = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<img alt="" class="emojione" title=":man_mechanic_tone1:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f468-1f3fb-1f527.png"/>

<img class="emojioneemoji" alt="‍" title=":man_mechanic_tone1:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f468-1f3fb-1f527.png"/>

<img class="emojioneemoji" alt="" title=":stuck_out_tongue_closed_eyes:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f61d.png"/>

<img class="emojioneemoji" alt="" title=":stuck_out_tongue_closed_eyes:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f61d.png">

<img class="emojioneemoji" alt="" title=":stuck_out_tongue_closed_eyes:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f61d.png"></img>

<img  alt="" class="emojioneemoji"title=":stuck_out_tongue_closed_eyes:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f61d.png"></img>

<img  alt="" class="emojioneemoji"title=":stuck_out_tongue_closed_eyes:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f61d.png"/>

"<p>test 123</p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f602.png"><br></p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f47d.png"><br></p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f44a.png"><br></p>"

"<p>test 321</p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f602.png"><br></p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f47d.png"><br></p><p><img alt="" class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f44a.png"><br></p>"

<img ng-src="https://placeimg.com/640/480/any" title="3" alt="ooo" src="https://placeimg.com/640/480/any">`;
var rx = /<img\s+(?=(?:[^>]*?\s)?class="[^">]*emojione)(?:[^>]*?\s)?alt="([^"]*)"[^>]*>(?:[^<]*<\/img>)?/gi;
document.body.innerHTML = "<pre>" + html.replace(rx, "$1") + "</pre>";

Thanks! Very nice explanation! – Rafael Cruz Feb 22 '19 at 12:52 — Rafael Cruz, Feb 22 '19 at 12:52

Convert emojione img html tag back to unicode

1 Answers1