javascript - 将 emojione img html 标签转换回 unicode

Question

我正在尝试创建一个函数来替换所有出现的 <img>与 emojione (不是一个完整的词)在其类别中alt属性，其中包含表情符号 unicode。

全部<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 demo .

详情

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

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