Конвертируйте html-тег emojione img обратно в Юникод

Question

Я пытаюсь создать функцию для замены всех вхождений <img> на emojione (не полностью слово) в своем классе на атрибут alt, который содержит юникод emoji.

Все <img> вхождения, которые не имеют emojione в своем классе, не могут быть заменены.

Что не так с моим регулярным выражением или кодом?

Заранее спасибо!

Вот мой код:

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>

Answer 1

Вы можете использовать

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

См. Демоверсию regex .

Подробности

• <img - литеральная подстрока
• \s+ - 1+ пробелов (их должно быть не менее 1, так как должны быть атрибуты)
• (?=(?:[^>]*?\s)?class="[^">]*emojione) - положительный результат, который гарантирует, что немедленносправа от текущего местоположения есть
  • (?:[^>]*?\s)? - необязательная последовательность любых символов 0+, отличных от >, а затем пробел
  • class=" - литеральная подстрока
  • [^">]*emojione - любые 0+ символов, кроме " и >, а затем emojione (таким образом проверяется наличие слова внутри class)
• (?:[^>]*?\s)? - необязательная последовательность любых символов 0+, отличных от >, а затем пробел
• alt=" - буквальная подстрока
• ([^"]*) - группа 1 ($1 в шаблоне замены)
• "[^>]*> - конец тега img: ", 0+ символов, отличных от >, а затем >
• (?:[^<]*<\/img>)?- необязательная последовательность
  • [^<]* - 0+ символов, кроме <
  • <\/img> - </img> подстрока.

Вот JSдемо:

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") + "

";