【发布时间】：2019-02-21 19:26:17
【问题描述】：
我正在尝试创建一个函数，将其类中所有出现的 <img> 替换为 emojione（不是一个完整的单词）到它的 alt 属性，其中包含 emoji unicode。
所有在其类中没有 emojione 的 <img> 事件都不能被替换。
我的正则表达式或代码有什么问题？
提前致谢！
这是我的代码：
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>【问题讨论】：
-
为什么要使用正则表达式来做到这一点？
-
我需要在我的数据库中将所有表情符号保存为 unicode。
-
但是你仍然可以使用 dom 元素来做到这一点 - 你可能已经在 dom 中拥有它们，所以为什么不使用它们
-
其实我的 DOM 中没有，因为需要替换的文本来自用户的输入字段。
-
查看jsfiddle.net/4n18e9s5 演示，这是您需要的吗？还是jsfiddle.net/b9fhwag5/1?
标签： javascript regex emoji emojione