How to use emoji-regex - 10 common examples

getRanges() {
    const newText = [];
    let lastRange;

    // For all the characters on the text
    for(let textCharIndex = 0;textCharIndex < this.props.text.length;textCharIndex++) {
      const range = this.getRange(textCharIndex);
      const url = getUrl(textCharIndex, this.props.text);
      const isEmoji = emojiRegex().test(this.props.text[textCharIndex] + this.props.text[textCharIndex + 1]);
      // Get the current character node
      const node = this.getNode(textCharIndex, range, this.props.text, url, isEmoji);

      // If the next node is an url one, we fast forward to the end of it
      if(url.length) {
        textCharIndex += url.length - 1;
      } else if(isEmoji) {
        // Because an emoji is composed of 2 chars
        textCharIndex++;
      }

      if(!range) {
        newText.push(node);
        continue;
      }

userNameInput.addEventListener('input', () => {
    const EMOJI_REGEX = emojiRegex();
    if (EMOJI_REGEX.test(userNameInput.value)) {
      // set field to invalid so it gets detected by GlFieldErrors
      userNameInput.setCustomValidity('Invalid field');
    } else {
      userNameInput.setCustomValidity('');
    }
  });

const { editMessageId } = this.state;
        const innerText = this.newMessageRef.current.innerText;
        if (!innerText || innerText.length > 11 || editMessageId) {
            const { hint } = StickerStore;
            if (hint) {
                TdLibController.clientUpdate({
                    '@type': 'clientUpdateLocalStickersHint',
                    hint: null
                });
            }

            return;
        }

        const t0 = performance.now();
        const regex = emojiRegex();
        let match = regex.exec(innerText);
        const t1 = performance.now();
        // console.log('Matched ' + (t1 - t0) + 'ms', match);
        if (!match || innerText !== match[0]) {
            const { hint } = StickerStore;
            if (hint) {
                TdLibController.clientUpdate({
                    '@type': 'clientUpdateLocalStickersHint',
                    hint: null
                });
            }

            return;
        }

        const timestamp = Date.now();

/* eslint-disable no-cond-assign */
import emojiRegex from 'emoji-regex';
import Font from '../font';
import { resolveImage } from '../utils/image';

// Caches emoji images data
const emojis = {};
const regex = emojiRegex();

const reflect = promise => (...args) => promise(...args).then(v => v, e => e);

// Returns a function to be able to mock resolveImage.
const makeFetchEmojiImage = () => reflect(resolveImage);

/**
 * When an emoji as no color, it might still have 2 parts,
 * the canonical emoji and an empty string.
 * ex.
 *   (no color) Array.from('❤️') => ["❤", "️"]
 *   (w/ color) Array.from('👍🏿') => ["👍", "🏿"]
 *
 * The empty string needs to be removed otherwise the generated
 * url will be incorect.
 */

strategy: (block, cb) => {
      const pat = emojiRegex();
      const text = block.getText();
      let match;
      let index;
      // tslint:disable-next-line no-conditional-assignment
      while ((match = pat.exec(text))) {
        index = match.index;
        cb(index, index + match[0].length);
      }
    },
    component: ({

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import emojiRegex from 'emoji-regex';

import {Emojis, EmojiIndicesByAlias} from './emojis';

const RE_NAMED_EMOJI = /(:([a-zA-Z0-9_-]+):)/g;

const RE_UNICODE_EMOJI = emojiRegex();

const RE_EMOTICON = {
    slightly_smiling_face: /(^|\s)(:-?\))(?=$|\s)/g, // :)
    wink: /(^|\s)(;-?\))(?=$|\s)/g, // ;)
    open_mouth: /(^|\s)(:o)(?=$|\s)/gi, // :o
    scream: /(^|\s)(:-o)(?=$|\s)/gi, // :-o
    smirk: /(^|\s)(:-?])(?=$|\s)/g, // :]
    smile: /(^|\s)(:-?d)(?=$|\s)/gi, // :D
    stuck_out_tongue_closed_eyes: /(^|\s)(x-d)(?=$|\s)/gi, // x-d
    stuck_out_tongue: /(^|\s)(:-?p)(?=$|\s)/gi, // :p
    rage: /(^|\s)(:-?[[@])(?=$|\s)/g, // :@
    slightly_frowning_face: /(^|\s)(:-?\()(?=$|\s)/g, // :(
    cry: /(^|\s)(:[`'’]-?\(|:'\(|:'\()(?=$|\s)/g, // :`(
    confused: /(^|\s)(:-?\/)(?=$|\s)/g, // :/
    confounded: /(^|\s)(:-?s)(?=$|\s)/gi, // :s
    neutral_face: /(^|\s)(:-?\|)(?=$|\s)/g, // :|

title: 'Emoji Style',
				component: 'setting-select-box',
				data: [
					{value: 0, title: 'Native'},
					{value: 'twitter', title: 'Twitter'},
					{value: 'google', title: 'Google'},
					//{value: 'apple', title: 'Apple'},
					{value: 'emojione', title: 'EmojiOne'},
					//{value: 'facebook', title: 'Facebook'},
					//{value: 'messenger', title: 'Messenger'}
				]
			}
		});

		// For some reason, splitter is a function.
		this.splitter = splitter();

		this.emoji = {};
		this.names = {};
		this.chars = new Map;
	}

*/
    for (let textCharIndex = 0; textCharIndex < this.props.text.length; textCharIndex++) {
      /**
       * Get range text
       */
      const range = this.getRange(textCharIndex);

      /**
       * Check characters for URL
       */
      const url = Utils.Checkers.getUrl(textCharIndex, this.props.text);

      /**
       * Check characters for emoji
       */
      const isEmoji = emojiRegex().test(this.props.text[textCharIndex] + this.props.text[textCharIndex + 1]);

      /**
       * Get the current character node
       */
      const node = this.getNode(textCharIndex, range, this.props.text, url, isEmoji);

      /**
       * If the next node is an url one, we fast forward to the end of it
       */
      if (url.length) {
        textCharIndex += url.length - 1;
      } else if (isEmoji) {
        /**
         * Because an emoji is composed of 2 chars
         */
        textCharIndex++;

validatePattern(value) {
    const pattern = emojiRegex();
    this.invalidInput = new RegExp(pattern).test(value);
  }
}