Git Product home page Git Product logo

qq-wechat-emotion-parser's Introduction

QQ WechaT EmotioN ParseR

NPM version Build Status Coverage Status Dependency manager

嗯,这是一个很简单的小工具,作用是将网页中添加的QQ表情和或者微信表情字符串转化为表情图片。

  • 快速!这是目前最快速的表情字符串转换JS库,使用前缀树(Trie)实现,对于限长的表情库,算法复杂度达到O(n)。
  • 方便!无任何依赖,只需引入min.js即可使用。同时支持Node.js环境。

Demo

example 1

输入:

/::)

输出:

<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif" alt="/::)">

效果:

example 2

输入:

I xx Gunzi, /::), No no no, I just xx xx/::B.

输出:

I xx Gunzi, <img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif" alt="/::)">, No no no, I just xx xx<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/2.gif" alt="/::B">.

效果:

I xx Gunzi, , No no no, I just xx xx.

Usage

本工具对外暴露一个qqWechatEmotionParser()方法,此方法的输入是需要处理的字符串,输出是将字符表情转化为img标签的字符串。

浏览器环境

  1. 下载并引入https://github.com/buddys/qq-wechat-emotion-parser/blob/master/dist/qq-wechat-emotion-parser.min.js

    <script src="/path/to/qq-wechat-emotion-parser.min.js"></script>
  2. 调用window.qqWechatEmotionParser

    var text = 'I xx Gunzi /::), No no no, I just xx xx/:<L>.';
    var html = qqWechatEmotionParser(text);
    
    document.write(text);
    document.write('<br/>')
    document.write(html);

Node环境

  1. 安装:

    npm install qq-wechat-emotion-parser
  2. 使用:

    var qqWechatEmotionParser = require('qq-wechat-emotion-parser');
    
    var text = 'I xx Gunzi /::), No no no, I just xx xx/:<L>.';
    var html = qqWechatEmotionParser(text);
    
    console.log(html);

Contribution

贡献代码

欢迎通过Github提交issue或者贡献代码, 贡献代码前需要仔细阅读原代码尽量保持代码风格一致。

新增标签

表情在src/emotion.json文件下保存,通过编辑该json文件定义表情的字符表示以及图片源。需要注意以下两点:

  • 表情的字符表示应该尽量避免产生歧义
  • 图片托管应使用稳定,国内访问速度快的服务器

License

GPL V3.0

harttle, meriky @ Buddys Copyright (c) 2016

qq-wechat-emotion-parser's People

Contributors

harttle avatar meriky avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

qq-wechat-emotion-parser's Issues

微信表情支持吗

[社会社会][旺柴][好的][叹气][打脸][翻白眼][666][让我看看] 这些

`else return;` in `index.js` line 15 causes webpack failed to load this file.

With webpack, it seems the else returns; is invalid in the import stage, though it never gets executed.

ERROR in ./~/qq-wechat-emotion-parser/src/index.js
Module parse failed: /some/path/to/node_modules/qq-wechat-emotion-
parser/src/index.js 'return' outside of function (15:5)
You may need an appropriate loader to handle this file type.
|     window.qqWechatEmotionParser = qqWechatEmotionParser;
| }
| else return;
| 
| function build(){
 @ ./src/components/message-content-parser.js 10:0-61
 @ ./src/components/index.jsx
 @ ./src/wall/wall.jsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/wall/wall.jsx

Commenting the statements out can fix this. I recommend to use a better fallback.

img标签建议加上display:inline

建议表情作为图片不换行。
<img style="display:inline!important;" src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif" alt="/::)">

请教下如何将表情代码删除和插入并做到灵活的在任意位置添加和删除

非常感谢做出这样的一个解析的组件,非常实用。我有用你的组件实现了表情选择组件和支持表情输入的输入框组件,但在实现输入框组件的时候有一些问题想请教一下。我在添加表情的时候将表情代码替换成img标签,展现的伪文本域中,但是如何做到删除这个表情能够把对应纯文本中的表情代码删除呢?纯请教,非组件的issue,如能帮助,万分感谢!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.