Split HTML Text Into Characters And Words – SplitText

Preview:

Description:

SplitText is a Typescript/JavaScript library that can split HTML text into individual characters and words.

Each character and word is wrapped in an inline-block <div> element for further styling or animation purposes.

How to use it:

1. Install and import the SplitText.

# Yarn
$ yarn add @gregoire.ciles/split-text
# NPM
$ npm i @gregoire.ciles/split-text

import SplitText from '@gregoire.ciles/split-text';

2. Split text in an element into characters and words.

<h3 id="example">CSSScript COM</h3>

const element = document.getElementById('example');
const { chars, words } = new SplitText(element);
console.log({ chars, words });

3. Output.

<h3 class="lead" id="example">
  <div style="display: inline-block; position: relative;">
    <div style="display: inline-block; position: relative;">C</div>
    <div style="display: inline-block; position: relative;">S</div>
    <div style="display: inline-block; position: relative;">S</div>
    <div style="display: inline-block; position: relative;">S</div>
    <div style="display: inline-block; position: relative;">c</div>
    <div style="display: inline-block; position: relative;">r</div>
    <div style="display: inline-block; position: relative;">i</div>
    <div style="display: inline-block; position: relative;">p</div>
    <div style="display: inline-block; position: relative;">t</div>
  </div>
  <div style="display: inline-block; position: relative;">
    <div style="display: inline-block; position: relative;">C</div>
    <div style="display: inline-block; position: relative;">O</div>
    <div style="display: inline-block; position: relative;">M</div>
  </div>
</h3>