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.
-
Author
Follow Julian for tweets on UI animation. Also, check out Velocity.js.
-
Usage
// Blast apart an element using the "word" delimiter $("div").blast({ delimiter: "word" });
-
Before
[tab]Hello World -
After
[tab]Hello [tab]World -
6+
-
Options Overview
Blast's full options listing along with default values:
$("div").blast({ [tab]delimiter: "character" // Set the delimiter type (see left) [tab]search: false // Perform a search *instead* of delimiting [tab]tag: "span" // Set the wrapping element type (e.g. "div") [tab]customClass: "" // Add a custom class to wrappers [tab]generateIndexID: false // Add #customClass-i to wrappers [tab]generateValueClass: false // Add .blast-word-val to wrappers [tab]stripHTMLTags: false // Strip HTML before blasting [tab]returnGenerated: true // Return generated elements to stack [tab]aria: true // Avoid speechflow disruption for screenreaders });
See below for a breakdown of each option.
-
Options Breakdown
delimiter {string}, default: "word"
Either set the delimiter type ("all", "character", "word", "sentence", or "element"), enter a "search phrase", or provide /your-own-regex/.
The difference between "all" and "character" is that "all" also matches space characters and sets an inlined style on them of white-space: pre-line so that they don't collapse.
search {boolean}, default: false
This behavior is new. Ensure you're using the latest version of Blast.
Instead of passing in a delimiter option, you can provide a string to the search option to perform case-insensitive phrase matching. Searching also enables multiple concurrent Blast calls on an element, which is otherwise not permitted.
For example:
$("div").blast({ [tab]search: "hairy freckles" });
"John eats hairy freckles." becomes:
John eats hairy freckles.
tag {string}, default: "span"
Set the element type that will wrap around matches. For example:
$("div").blast({ [tab]delimiter: "character", [tab]tag: "div" });
"Jack" becomes:
jackNote: span elements cannot have CSS3 transforms applied to them since their display is set to "inline" by default. To use the CSS3 transform property with spans, set their display to "inline-block".)
customClass {string}, default: null
Assign a custom class to the generated elements.
Note: From a performance standpoint, this is much faster than using jQuery/Zepto's $.addClass() after the elements have been generated.
generateIndexID {boolean}, default: false
First, provide a value to the customClass option (required) then set this option to true to assign 0-index IDs to the matches in the form of "customClass-index".
generateValueClass {boolean}, default: false
Only applies to the "character" and "word" delimiters. Set this option to true to generate class names in the form of "delimiterType-textValue".
For example:
$("div").blast({ [tab]delimiter: "word", [tab]generateValueClass: true });
"John loves isolation." becomes:
John loves isolation.
Note: When referencing these generated classes in your stylesheets, you must escape any non-alpanumeric characters in the class names. See this article for more information.
stripHTMLTags {boolean}, default: false
Set to true to permanently strip all descendant HTML tags (while retaining their inner text) before blasting.
Note: Stripped HTML tags are not regenerated if you subsequently reverse Blast (via $element.blast(false)).
returnGenerated {boolean}, default: true
Set to false (the default value is true) to return the root element(s) targeted by Blast to the jQuery chain instead of returning the elements generated by Blast.
Tip: When set to true, you can use jQuery's $.end() to return to the previous stack context (the root elements).
debug {boolean}, default: false
Set to true to 1) demarcate generated elements via color alternation, and 2) output performance and debug information to the console.
Note: Get in the habit of using this feature to quickly eyeball how Blast is delimiting your text.
aria {boolean}, default: true
This feature is new. Ensure you're using the latest version of Blast.
Set to false to prevent Blast from using a combination of ARIA attributes that prevent the disruption of speech flow for certain screenreaders.
Pass false as the sole parameter to Blast to undo Blast on the targeted element(s).
$element.blast(false);
Important: Before you can reverse Blast on an element, you must reverse Blast on any parent elements that have also been Blasted.
Want to learn more? Read the source!