npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wrap-chars

v2.2.5

Published

Individually wrap inline characters/words in a chosen element, with an optional class.

Downloads

104

Readme

WrapChars.js

V2.2.5

Contents

About

Tiny script containing just one, static method that takes any element and wraps each inline character in a given tag, with an optional class. Very small (<3KB minified, no dependencies).

Version 1 of this was very blunt in its approach, stripping out any nested tags entirely. This version is much more polite, and will do its best to preserve existing markup. It has several ways to control the wrapping process.

Homepage/Demos

Note: There was a long-standing issue where spaces would be 'undefined' if a spaceChar was not explicitly set, thanks to an oversight in the tests. This is fixed in 2.2.5.

Setup

Vanilla

Download one of the JavaScript files from the dist folder, probably the minified one. Import it into your HTML:

<script src="WrapChars.min.js"></script>

You can also embed from UNPKG:

<script src="https://www.unpkg.com/wrap-chars"></script>

Ensure the DOM has loaded completely before continuing.

npm/browserify/webpack etc

tbc

Use

WrapChars.wrap(elementReference, [paramsObject]);

Say we have the following HTML:

<blockquote cite="Lewis Carroll" id="poem">
    <span class="line">’Twas brillig, and the slithy toves</span><br>
    <span class="line">Did gyre and gimble in the wabe:</span><br>
    <span class="line">All mimsy were the borogoves,</span><br>
    <span class="line">And the mome raths outgrabe.</span>
</blockquote>

Grab a reference to the element you want to affect:

let domElement = document.getElementById ('poem');

To wrap the characters using the default settings, call the WrapChars.wrap() static method using the reference as the argument:

WrapChars.wrap (domElement);

You could also iterate over a NodeList if you prefer:

let lines = document.querySelectorAll ('*.lines');
lines.forEach (line => WrapChars.wrap (line));

Note that this is a destructive process. If you think you may want to revert to the original HTML structure at any point you will need to store a copy of the original markup before applying the method.

Any whitespace is reduced down to a single space. Text nodes containing only whitespace are ignored completely.

Configuration

WrapChars.wrap() accepts two arguments:

| Argument | Type | Description | | --- | --- | --- | | element | HTMLElement | A reference to a DOM element, e.g. as obtained via querySelector() or getElementById(). | | params | Object | (optional) An object containing key/value pairs to configure the method (see below). |

params object

The params object can contain the following properties, all optional:

| Property | Type | Description | | --- | --- | --- | | split | string | Defines how text nodes will be subdivided for wrapping. Currently takes a value of "letter" or "word". Default is "letter". split replaces type since v2.2, though type still exists as an alias. | | tagName | string | The type of element that will be wrapped around each character. Default is "span". | | className | string | The class name that can be applied to each wrapped element. Default is undefined. | | deep | Boolean | Boolean value where, if true, will parse the entire DOM tree of the element. If false will only wrap inline text of the element itself. Default is true. | | wrapSpaces | Boolean | Boolean value to specify if spaces should be wrapped. If a value is set for spaceChar those characters are also subject to this setting. Default is false | | skipClass | string | If specified, any element with a matching class name will be ignored. Default is undefined. | | spaceChar | string | The character to replace spaces with, if specified. The value is standardised internally, so can be a raw character, an escaped hexcode, a Unicode code or an HTML entity. HTML elements are stripped out, to limit exploits. WrapChars.wrap() intentionally does not convert existing HTML entities, so certain results can be achieved by adding them beforehand. Default is undefined. |

Example
WrapChars.wrap(myElement, {
    split: "word",
    tagName: "div",
    className: "wrapped_content",
    deep: false,
    wrapSpaces: true,
    skipClass: "skip_this",
    spaceChar: "&nbsp;"
});

Known issues

  • word type can't differentiate between words and punctuation. To work around this, pre-wrap characters and make use of skipClass.
  • Certain (unlikely) combinations of HTML mark-up can cause empty elements to be added when wrapSpaces is true and split is equal to word. Can be fixed with minor HTML reformatting.
  • CodeQL flags a couple of lines for passing DOM text directly into HTML. Since elements are removed first I am not convinced this is an issue.

Version history

  • v2.2.5 - Fixed undefined spaceChar bug.
  • v2.2 - Added wrapSpaces property, renamed type to split.
  • v2.1 - Added deep and skipClass properties, improved whitespace handling.
  • v2.0 - Near complete rewrite to play nicer with other people's markup
  • v1.0 - Original version