Convert emojione img html tag back to unicode

Question

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

All 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.















"test 123



"

"test 321



"


`
)

const emojioneImgToUnicode = function (txt) {
	let regex = /]+?>(?:<\/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;
}

Wiktor Stribiżew · Accepted Answer

You may use

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

See the regex demo.

Details

- 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  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.















"test 123



"

"test 321



"

`;
var rx = /]*?\s)?class="[^">]*emojione)(?:[^>]*?\s)?alt="([^"]*)"[^>]*>(?:[^<]*<\/img>)?/gi;
document.body.innerHTML = "" + html.replace(rx, "$1") + "
";

Convert emojione img html tag back to unicode

Answers (1)

Related Questions