html-img-alt

Adds missing ALT attributes to IMG tags and cleans within IMG tags. No HTML parsing used.

Table of Contents

• Install
• Idea
• API
• The algorithm
• Contributing
• Licence

Install

$ npm i -S html-img-alt

const alts = require('html-img-alt')
var res = alts('zzz<img        alt="123" >zzz')
console.log('res = ' + res)
// => 'res = zzz<img alt="123" >zzz'

⬆  back to top

Idea

This library takes care of the alt= attributes (also wrongly-called "alt tags") on the image tags in HTML:

1. If alt attribute is missing on any img tag, it will add an empty-one.
2. If alt attribute is present on any img tag, it will run its contents through string-unfancy to:
   • decode all HTML entities, recursively (in case multiple HTML encoding was applied)
   • replace "fancy" characters with their simpler equivalents within ASCII range. For example, single curly quotes are changed into single apostrophes. This includes dashes and all sorts of double quotes.
   • replace all non-breaking spaces with regular spaces
3. If img alt attribute has single quotes, it will remove them and all content within and replace with a pair of empty double quotes.
4. It will also normalise the white space within img tags, leaving one space between attributes and leaving one space before the closing slash (XHTML) or closing bracket (HTML).
5. You can turn it off, but by default all the contents of the image ALT attributes will be trimmed and unfancie'd (curly quotes, m/n-dashes replaced with single quotes, minuses). That's to keep it simple for old email consumption software and make it easier to QA them.

html-img-alt works fine with both HTML and XHTML; it doesn't touch the closing slashes. Use a separate library for enforcing the closing slashes (or removing them) from singleton tags (br, hr and so on).

The main USP of this library is that it does not parse the HTML. It will never throw an error because of a dirty code. It might throw because of wrong input type, but not because of something in the code.

⬆  back to top

API

String-in, string-out. You can pass in the optional options object:

Defaults:

    {
      unfancyTheAltContents: true
    }

⬆  back to top

The algorithm

If somebody came up with this problem, the first idea would be to tackle it by parsing the HTML, traversing the AST tree, finding img tags and checking are all alt attributes in place.

However, this way is a) susceptible to HTML errors or any unrecognised code in the HTML (such as your back-end code or ESP campaign setup tags), and b) it's slow.

My chosen way, treating the HTML as a string, is both fastest and the most resilient. We traverse the code only once. All findings are put into "to-do list", driven by a combo of:

• string-slices-array-push - which manages the string index ranges, allowing to add/remove/query; and
• string-replace-slices-array - which takes the final "to-do list" string ranges array and performs all those operations at once.

The operation speeds are so fast that we can allow it to be synchronous!

When I re-coded email-remove-unused-css this way (v.2+), treating HTML as a string, the largest of the largest email templates' fixing time dropped from handful minutes to miliseconds.

⬆  back to top

Contributing

All contributions are welcome. Please stick to Standard JavaScript notation and supplement the test.js with new unit tests covering your feature(s).

If you see anything incorrect whatsoever, do raise an issue. If you file a pull request, I'll do my best to help you to get it merged as soon as possible. If you have any comments on the code, including ideas how to improve something, don't hesitate to contact me by email.

⬆  back to top

Licence

MIT License (MIT)

Copyright (c) 2017 Codsen Ltd, Roy Revelt

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.