Blast.js|GitHub

Blast text apart to make it manipulable.

  • Overview

    Blast.js separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element. Alternatively, Blast can match custom regular expressions and phrases.
  • Blast's uses include typographic animation, juxtaposition, styling, search, and analysis.
  • Blast is highly accurate; it neither dumbly splits words at spaces nor dumbly splits sentences at periods. All Latin alphabet languages and UTF-8 characters are supported. Features include: 1) By only traversing text nodes, all HTML, event handlers, and spacing are preserved. Thus, you can safely apply Blast to any part of your page. 2) Automatic class and ID generation make text selection simple. 4) Blast can be fully undone with a single call.
  • The elements Blast generates can be accessed through both CSS and JavaScript by referencing auto-generated class names or iterating via jQuery/Zepto's eq() function.
  • Refer to the documentation on the right for Blast's API.
  • Read this article to learn more about working with Blast.

  • Robustness Gallery

  • Choose a delimiter type to see how Blast performs:
  • Code mockups and entities are preserved: <br/> → ○_○ ©
  • Existing <span>s do not cause complications. Plus, style and script elements are ignored during DOM traversal.
  • Event handlers are preserved:
  • ¿Does the sentence delimiter recognize the full range of Latin alphabet punctuation? ¡Yes! « Mais, oui ! »
  • "Inner "quotes" don't break the sentence delimiter!" Further, periods inside words (e.g. Blast.js), in formal titles (e.g. Mrs. Bluth, Dr. Fünke), and in "e.g." and "i.e." do not falsely match as sentence-final punctuation.
  • You can manually prevent sentence-final punctuation from triggering a sentence match by replacing it with its ASCII code inside double curly brackets: {{ASCII}}.
  • Note that the introduction of an HTML element, like the <i> surrounding this clause, breaks a sentence match. Likewise, the <b> within embolden breaks a word match. This is a result of the DOM traversal process, which treats each new element as a separate search string.
  • HTML tags and attributes, e.g. BOLD and ITALIC, are preserved in their entirety. Further, Blast fully preserves this <span> that has a <strong> nested inside of it.
  • Read this this article for a technical walkthrough of Blast.