將emojione img html標簽轉換回unicode

Question

我正在嘗試創建一個函數來將其所有出現的<img>與emojione （不是完全單詞）替換為其alt屬性，該屬性包含表情符號unicode。

所有在同類課程中沒有emojione <img> occorrences都無法取代。

我的正則表達式或代碼有什么問題？

提前致謝！

這是我的代碼：

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

請參閱正則表達式演示 。

細節

• <img - 文字子字符串
• \\s+ - 1+個空格（因為必須有屬性，它們至少會有1個空格）
• (?=(?:[^>]*?\\s)?class="[^">]*emojione) - 正面的lookaehead，確保立即在當前位置的右邊，有
  • (?:[^>]*?\\s)? - 除了>之外的任何0+字符的可選序列，然后是空格
  • class=" - 一個文字子串
  • [^">]*emojione -任何0+比其他字符"和>然后emojione （內部的字class因此檢查存在下）
• (?:[^>]*?\\s)? - 除了>之外的任何0+字符的可選序列，然后是空格
• alt=" - 一個文字子串
• ([^"]*) - 第1組（替換模式中$1 ）
• "[^>]*> -的端img標簽： " ，0+比其他字符> ，然后>
• (?:[^<]*<\\/img>)? - 可選的序列
  • [^<]* - 除<以外的<字符
  • <\\/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>";