Dividir texto en palabras y caracteres-dividiendo. js

Vista prévia

Descripción

División. js es una pequeña biblioteca de JavaScript que se puede utilizar para dividir el texto en palabras y caracteres envueltos en el span Element. Para poder aplicar estilos CSS personalizados a las palabras y caracteres individualmente.

Funcionamiento

Instale el paquete con NPM.

# NPM
$ npm install splitting --save

O incluir directamente el divide. js desde una red CDN.

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

Divida el contenido de texto en palabras.

<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>

Divida el contenido de texto en caracteres.

<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>

Divida un elemento con palabras.

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

Divida una cadena en palabras o caracteres.

Splitting.fromString("string here", {


// or 'words'

type: "chars",


 // true to receive an Element back instead of a String.

element: false


 });