将emojione img html标记转换回unicode

Question

我试图创建一个函数，将<img>类中所有出现的emojione (不是一个完整的word)替换为它的alt属性，该属性包含表情符号unicode。

类中没有emojione的所有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+ chars (除了>，然后是> )
• (?:[^<]*<\/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.

<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>";

​