开发 我的解析表情包 emoji -- js 实现

· 发布于 6个月前 · 276 次阅读
本帖最后由 阳 于 2018-11-06 08:21:17 编辑。

本站开发过程中想要实现评论中插入表情,决定还是用 javascript 来实现。

不打算弄很多表情,网上下载了一个 wordpress 的表情包,然后撸了一段 JS 代码:

emoji.js

const emoji = {
    regexp: /:(arrow|biggrin|confused|cool|cry|eek|evil|exclaim|idea|lol|mad|mrgreen|neutral|question|razz|redface|rolleyes|sad|smile|surprised|twisted|wink):/g,
    emojiPath: '/images/smilies/',

    trans (text) {
        text = text.replace(this.regexp, (match, code) => {
            // 如果正则表达式为全局匹配模式g, 那么这个方法将被多次调用
            // let code = match[0].slice(1, -1)
            return `<img alt="${code}" class="wp-smiley" src="${this.emojiPath}icon_${code}.gif">`
        })

        return text
    },

    setEmojiPath (path) {
        this.emojiPath = path
    }
}

export default emoji 

使用方法

import emoji from './emoji'

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.has-emoji').forEach(emojiArea => {
        emojiArea.innerHTML = emoji.trans(emojiArea.innerHTML)
    })
})
共收到 0 条回复
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册