Emoji Censor

A script to censor out any emoji characters in a piece of text, either visually or audibly.

Why would anyone want such a thing?

Maybe you’re a curmudgeon like me. Maybe you just think it would have tremendous comedic value.

Really, this all started with a tweet from Ben Buchanan:

Fun game: mentally replace all emoji with a censorship bleep.

— Ben Buchanan (@200okpublic) March 14, 2017

The best way to describe it properly is to just link to the demo, so go play with it: gilmoreorless.github.io/emoji-censor

You can also try it as a browser extension, to visually block out all emoji as you browse the web. It’s available for Chrome and Firefox.

Usage

Include the emoji-censor.js file into your project – the API sits on a global variable named emojiCensor.

speakCensored(text)

Uses the Web Speech API and Web Audio API to speak the provided text out loud. Any emoji characters are replaced with a censorship bleep.

For example:

emojiCensor.speakCensored('What a nice cat. 🐱');

This will announce "What a nice cat. [bleep]" using text-to-speech synthesis.

redactElements(elementsOrSelector[, options])

Applies redaction to HTML elements by blacking out emoji characters.

The elementsOrSelector argument determines which elements to redact. It can be:

• A single DOM element.
• An array or NodeList of DOM elements.
• A string of any valid CSS selector that can be passed to document.querySelectorAll().

An options object can also be provided for additional functionality. The available options are:

• customDisplayElements — an elementsOrSelector-style value that determines extra elements to redact.

  This is different from the main arguments as these elements are wholly redacted — no text substitution is performed. This is useful for sites that use custom image fallbacks instead of emoji text characters, where the whole image has to be redacted.

• rootNode — a DOM node that determines the starting point for redaction.

  This defaults to document, and is generally only needed when you want to redact elements that don’t count as part of the main document (e.g. document fragments or shadow roots).

// Example: This will black out any emoji within `.content` and its children.
emojiCensor.redactElements('.content');

// Example for a site using custom images instead of text
emojiCensor.redactElements('.article', { customDisplayElements: 'img.custom-emoji' });

This API is also aliased as emojiCensor.redactioAdAbsurdum(), purely because I liked the pun.

redactedCount([options])

Returns the number of redacted emoji characters found in the current document (or custom rootNode, if provided).

An options object can also be provided for additional functionality. The available options are:

• rootNode — a DOM node that determines the starting point for redaction (the same functionality as redactElements()).

emojiCensor.redactedCount();
// 12

var embeddedTweet = document.querySelector('twitter-widget');
emojiCensor.redactedCount({ rootNode: embeddedTweet.shadowRoot });
// 5

Utilities

There are some simple utility methods that are required to make the main methods work, exposed on the API for convenience.

hasEmoji(text)

Tests if the provided text contains emoji characters, returning a boolean. This is just a wrapper around the emoji-regex library.

Technical note: This script matches all characters that are listed by the Unicode Technical Report #51 as having the property Emoji=yes. These characters may or may not appear as coloured glyphs, it entirely depends on your browser and operating system. The only exception is that I have deliberately excluded the following characters: 0-9 (all numbers), #, *, ©, ®, ™.

emojiCensor.hasEmoji('⦿ Selected');  // false
emojiCensor.hasEmoji('🔘 Selected');  // true

splitText(text)

Splits the given text into an array of parts based on the location of emoji characters. Each member of the array is an object containing two properties:

• isEmoji – (boolean) true if the text is an emoji character, false otherwise
• text – (string) the text content of the part

emojiCensor.splitText('Hi there. 👋🏼 Nice to meet you.');
/*
 * Return value:
 *
 * [
 *   { isEmoji: false, text: 'Hi there. ' },
 *   { isEmoji: true,  text: '👋🏼' },
 *   { isEmoji: false, text: ' Nice to meet you.' }
 * ]
 */

isAudioSupported()

Returns a boolean indicating if speaking censored text is supported in the user’s browser.

Credits

This code is open source under the MIT license – © Gilmore Davidson.

Emoji detection is provided by the emoji-regex library, thanks to the tireless efforts of Mathias Bynens to improve the state of Unicode handling in JavaScript.

And, of course, thanks to Ben for sparking the idea in the first place. Stop providing me with distractions, dammit! 😉