HTMLRazor

Typescript/Javascript library to truncate text from HTML without modifying its structure, perfect for CMS HTML strings and other purposes.

Installation

  npm install html-razor

Basic usage

import { HTMLRazor } from 'html-razor';

const myHTMLString = '<h1>Hello World</h1><p>Have a <strong>wonderful</strong> day</p>';
const truncateLength = 24;
const htmlRazor = new HTMLRazor(myHTMLString, truncateLength);

console.log(htmlRazor.htmlText);
// returns original html

console.log(htmlRazor.htmlTextTruncated);
// returns '<h1>Hello World</h1><p>Have a <strong>wonder</strong></p>'

You can also add an ellipsis at the end or any text string you want:

// based on the previous example
// ...

// Set true in the third argument for default ellipsis ('...')
const htmlRazor_defaultEllipsis = new HTMLRazor(myHTMLString, truncateLength, true);

// Set a string value in the third argument for custom ellipsis
const htmlRazor_customEllipsis = new HTMLRazor(myHTMLString, truncateLength, '>> >> >>');

API Reference

HTMLRazor Class

import { HTMLRazor } from 'html-razor';

new HTMLRazor(htmlText, truncateLength, ellipsis);

| Constructor arguments | Description
| :-------- | :------- | | htmlText: string | Required. Origin HTML text to truncate | | truncateLength: number | Required. Truncate length | | ellipsis?: boolean \| string | Optional. Set default (true) or custom (string) ellipsis in the end of html text |

| Property | Type | Description | | :-------- | :------- | :------------------------- | | htmlText | readonly string | Original html text string | | htmlTextTruncated | readonly string | Result of truncating html text string | | truncateLength | readonly number | Truncate length | | ellipsisText | readonly string or null | Ellipsis used in the end of the truncated html |

HTMLRazorDOM Class

import { HTMLRazorDOM } from 'html-razor';

new HTMLRazorDOM(htmlElement, truncateLength, ellipsis);

| Constructor arguments | Description
| :-------- | :------- | | htmlElement: HTMLElement | Required. Origin element | | truncateLength: number | Required. Truncate length | | ellipsis?: boolean \| string | Optional. Set default (true) or custom (string) ellipsis in the end of html text |

| Property | Type | Description | | :-------- | :------- | :------------------------- | | htmlElement | readonly HTMLElement | Origin element |

| Method | Arguments | Description | | :-------- | :------- | :------------------------- | | truncate | () | Truncates html text inside selected element | | expand | () | Expands to original html text inside selected element | | toggle | () | Switch between truncate() and expand() | | isTruncated | () | Returns current status of HTMLElement contents | | reload | () | Reads current html text to parse and set as original contents | | editOriginContent | (cb: EditOriginContentCallback)(Reference below in Common Types) | Handler to edit original html element | | set | (options: SetOptionsObject)(Reference below in Common Types) | Set new group options for current HTMLElement |

Common types

type EditOriginContentCallback = (htmlElement: HTMLElement) => void;

type SetOptionsObject = {
    truncateLength?: number,
    ellipsis?: boolean | string
    truncate?: boolean,
    reload?: boolean
};