Split Text Into Words And Characters – Splitting.js

Splitting.js is a tiny JavaScript library which can be used to split the text into words and characters wrapped in the span element. So that you’re able to apply custom CSS styles to the words and characters individually.

How to use it:

Install the package with NPM.

# NPM
$ npm install splitting --save

Or directly include the Splitting.js from a CDN.

<script src="//unpkg.com/splitting/splitting.js"></script>

Split the text content into words.

<p data-splitting-words>Hello World!</p>

Splitting.words("[data-splitting-words]");

<!-- Output -->
<p class="splitting" data-splitting-chars style="--total-words:1;">
  <span class="word" data-word="Hello" style="--word-index:0;">Hello</i>
  <span class="word" data-word="World!" style="--word-index:1;">World!</i>
</p>

Split the text content into characters.

<p data-splitting-chars>HELLO</p>

Splitting.chars("[data-splitting-chars]");

<!-- Output -->
<p class="splitting" data-splitting-chars style="--total-words:1; --total-chars:5;">
  <span class="word" data-word="HELLO" style="--word-index:0;">
    <span class="char" data-char="H" style="--char-index:0;">H</i>
    <span class="char" data-char="E" style="--char-index:1;">E</i>
    <span class="char" data-char="L" style="--char-index:2;">L</i>
    <span class="char" data-char="L" style="--char-index:3;">L</i>
    <span class="char" data-char="O" style="--char-index:4;">O</i>
  </i>
</p>

Split an element by words.

Splitting.lines("p[data-splitting]");

Split a string into words or characters.

Splitting.fromString("string here", {
  // or 'words'
  type: "chars", 
  // true to receive an Element back instead of a String.
  element: false 
  
});