Visual helper to place templating code around table tags into correct places

§ Idea

Very often, templating languages (or PHP or Email Service Providers' back-end code) is inserted in-between the HTML table tags: between table and tr, between tr and td and so on. If you open such HTML in a browser, that inserted code will appear at wrong places because the browser will try to patch it up (but will do it incorrectly).

This library patches the HTML, so the browser in the correct places renders that code between the table cells.

The patched code is not meant for production by any means - it's for visual display in a browser only!

This library takes string (hopefully some HTML) and outputs patched up string, so it's not an end tool, it's rather an API for a feature in other tools and browser plugins.


This package exports a plain objects with three keys: { patcher, defaults, version }.

The first-one has a value which is the main function. The second-one is the defaults (plain) object. The third-one is the version taken straight from package.json

For example:

// import ES6 style, if you want to consume this package as an ES module:
import { patcher, defaults, version } from "html-table-patcher";
const result = patcher("<table>1<tr><td>zzz</td></tr></table>");
console.log(`result = "${result}"`);
// => "<table><tr><td>1</td></tr><tr><td>zzz</td></tr></table>"
console.log(`current version of the API is: v${version}`);
// => current version of the API is: v1.0.15
console.log(`default settings are:\n${defaults}`);
// =>
// {
// "cssStylesContent": "",
// "alwaysCenter": false
// }

You can import whole package as a single variable and call its methods:

// for example, using CommonJs require():
const tablePatcher = require("html-table-patcher");
// now that you have "tablePatcher", call its methods:
console.log(`tablePatcher.version = ${tablePatcher.version}`);
// => "1.0.15"
// => "<table>..."

§ patcher() API

Main function, patcher(str[, opts]), takes two input arguments and returns a string of zero or more characters in length.

Input argumentKey value's typeObligatory?Description
strStringyesThe input string of zero or more characters
optsPlain objectnoAn Optional Options Object. See below for its API.

§ patcher options

Put options under function's second input argument, in a plain object, as per defaults:

import { patcher, defaults, version } from "html-table-patcher";
const result = patcher("<table>1<tr><td>zzz</td></tr></table>", {
// <---- options object
cssStylesContent: "",
alwaysCenter: false,

Here's the options object's API:

Options Object's keyValue's typeDefault valueDescription
cssStylesContentstring"" (empty string)Whatever you put here, will end up on every newly-added TD's inline style tag's value
alwaysCenterbooleanfalseEvery newly-added TD should have its contents centered (via an inline align="center" HTML attribute)

§ The algorithm

Uses home-brewn ingredients.

We parse using codsen-parser then traverse using ast-monkey-traverse-with-lookahead and record what needs to be amended using ranges-push and finally, apply all changes in one go using ranges-apply.

§ Using the GUI tap

When developing features, it's handy to have a GUI to be able to test multiple variations of input, quickly. Using unit tests is slow because you edit unit test's input, plus output is via unit test runner which is not perfect.

We set up a rudimentary front-end GUI. To run it, run the server from the root of this package, for example, running serve CLI ( in the terminal. After the server has started, for example on http://localhost:9000, navigate to folder tap/, for example, http://localhost:9000/tap. This will serve the tap/index.html from package's folder. It is wired up to consume the live UMD build from dist/ folder, so it's handy to test new features.

§ Licence

MITopens in a new tab

Copyright © 2015–2020 Roy Revelt and other contributors

Related packages:

📦 emlint 2.18.15
Pluggable email template code linter
📦 html-crush 2.0.8
Minifies HTML/CSS: valid or broken, pure or mixed with other languages
📦 string-strip-html 6.0.3
Strips HTML tags from strings. No parser, accepts mixed sources.
📦 detect-is-it-html-or-xhtml 3.9.61
Answers, is the string input string more an HTML or XHTML (or neither)
📦 is-html-tag-opening 1.8.2
Is given opening bracket a beginning of a tag?
📦 is-html-attribute-closing 1.2.7
Is a character on a given index a closing of an HTML attribute?
📦 is-language-code 1.0.11
Is given string a language code (as per IANA)