{"id":17786687,"url":"https://github.com/adasha/wrap-chars","last_synced_at":"2026-01-18T00:22:46.796Z","repository":{"id":41806343,"uuid":"144327490","full_name":"Adasha/wrap-chars","owner":"Adasha","description":"Individually wrap characters/words in a chosen element, with optional class.","archived":false,"fork":false,"pushed_at":"2023-02-23T19:02:38.000Z","size":566,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T11:45:36.042Z","etag":null,"topics":["char","character","class","delimit","divide","element","html","inline","isolate","letter","markup","nest","separate","space","split","string","tag","text","word","wrap"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Adasha.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-10T20:02:23.000Z","updated_at":"2022-05-22T20:58:49.000Z","dependencies_parsed_at":"2024-11-06T22:01:26.380Z","dependency_job_id":"6bf93d41-2f54-4a56-82eb-9081a05d7e70","html_url":"https://github.com/Adasha/wrap-chars","commit_stats":{"total_commits":86,"total_committers":4,"mean_commits":21.5,"dds":"0.16279069767441856","last_synced_commit":"cf3d5364a189db4f72abdea3f71930fcd4dd2cd2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adasha%2Fwrap-chars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adasha%2Fwrap-chars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adasha%2Fwrap-chars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adasha%2Fwrap-chars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Adasha","download_url":"https://codeload.github.com/Adasha/wrap-chars/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332545,"owners_count":20921853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["char","character","class","delimit","divide","element","html","inline","isolate","letter","markup","nest","separate","space","split","string","tag","text","word","wrap"],"created_at":"2024-10-27T10:04:25.011Z","updated_at":"2026-01-18T00:22:46.754Z","avatar_url":"https://github.com/Adasha.png","language":"HTML","readme":"\n# WrapChars.js\n\nV2.2.5\n\n## Contents\n\n- [About](#about)\n- [Setup](#setup)\n- [Use](#use)\n- [Known issues](#known-issues)\n- [Version history](#version-history)\n\n## About\n\nTiny 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 (\u003c3KB minified, no dependencies).\n\nVersion 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.\n\n[Homepage/Demos](http://lab.adasha.com/components/wrap-chars/index.html)\n\nNote: 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.\n\n## Setup\n\n### Vanilla\n\nDownload one of the [JavaScript files from the `dist` folder](https://github.com/Adasha/wrap-chars/tree/master/dist), probably the minified one.\nImport it into your HTML:\n\n```HTML\n\u003cscript src=\"WrapChars.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can also embed from UNPKG:\n\n```HTML\n\u003cscript src=\"https://www.unpkg.com/wrap-chars\"\u003e\u003c/script\u003e\n```\n\nEnsure the DOM has loaded completely before continuing.\n\n### npm/browserify/webpack etc\n\ntbc\n\n## Use\n\n```javascript\nWrapChars.wrap(elementReference, [paramsObject]);\n```\n\nSay we have the following HTML:\n\n```HTML\n\u003cblockquote cite=\"Lewis Carroll\" id=\"poem\"\u003e\n    \u003cspan class=\"line\"\u003e’Twas brillig, and the slithy toves\u003c/span\u003e\u003cbr\u003e\n    \u003cspan class=\"line\"\u003eDid gyre and gimble in the wabe:\u003c/span\u003e\u003cbr\u003e\n    \u003cspan class=\"line\"\u003eAll mimsy were the borogoves,\u003c/span\u003e\u003cbr\u003e\n    \u003cspan class=\"line\"\u003eAnd the mome raths outgrabe.\u003c/span\u003e\n\u003c/blockquote\u003e\n```\n\nGrab a reference to the element you want to affect:\n\n```javascript\nlet domElement = document.getElementById ('poem');\n```\n\nTo wrap the characters using the default settings, call the `WrapChars.wrap()` static method using the reference as the argument:\n\n```javascript\nWrapChars.wrap (domElement);\n```\n\nYou could also iterate over a NodeList if you prefer:\n\n```javascript\nlet lines = document.querySelectorAll ('*.lines');\nlines.forEach (line =\u003e WrapChars.wrap (line));\n```\n\nNote 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.\n\nAny whitespace is reduced down to a single space. Text nodes containing only whitespace are ignored completely.\n\n### Configuration\n\n`WrapChars.wrap()` accepts two arguments:\n\n| Argument | Type | Description |\n| --- | --- | --- |\n| `element` | HTMLElement | A reference to a DOM element, e.g. as obtained via `querySelector()` or `getElementById()`. |\n| `params` | Object | (optional) An object containing key/value pairs to configure the method (see below). |\n\n#### `params` object\n\nThe `params` object can contain the following properties, all optional:\n\n| Property | Type | Description |\n| --- | --- | --- |\n| `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. |\n| `tagName` | string | The type of element that will be wrapped around each character. Default is `\"span\"`. |\n| `className` | string | The class name that can be applied to each wrapped element. Default is *undefined*. |\n| `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`. |\n| `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` |\n| `skipClass` | string | If specified, any element with a matching class name will be ignored. Default is *undefined*. |\n| `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*. |\n\n##### Example\n\n```javascript\nWrapChars.wrap(myElement, {\n    split: \"word\",\n    tagName: \"div\",\n    className: \"wrapped_content\",\n    deep: false,\n    wrapSpaces: true,\n    skipClass: \"skip_this\",\n    spaceChar: \"\u0026nbsp;\"\n});\n```\n\n## Known issues\n\n- `word` type can't differentiate between words and punctuation. To work around this, pre-wrap characters and make use of `skipClass`.\n- 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.\n- 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.\n\n## Version history\n\n- v2.2.5 - Fixed undefined spaceChar bug.\n- v2.2   - Added *wrapSpaces* property, renamed *type* to *split*.\n- v2.1   - Added *deep* and *skipClass* properties, improved whitespace handling.\n- v2.0   - Near complete rewrite to play nicer with other people's markup\n- v1.0   - Original version\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadasha%2Fwrap-chars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadasha%2Fwrap-chars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadasha%2Fwrap-chars/lists"}