JSFiddle - React, Tailwind, and code Playground
HTML
<div id="txt">
</div>
JavaScript
/**
* [trimHtml description]
* @param {String} html
* @param {Object} options
* @return {Object}
*/
function trimHtml(html, options) {
options = options || {};
var limit = options.limit || 100,
preserveTags = (typeof options.preserveTags !== 'undefined') ? options.preserveTags : true,
wordBreak = (typeof options.wordBreak !== 'undefined') ? options.wordBreak : false,
suffix = options.suffix || '...',
moreLink = options.moreLink || '';
var arr = html.replace(/</g, "\n<")
.replace(/>/g, ">\n")
.replace(/\n\n/g, "\n")
.replace(/^\n/g, "")
.replace(/\n$/g, "")
.split("\n");
var sum = 0,
row, cut, add,
tagMatch,
tagName,
tagStack = [],
more = false;
for (var i = 0; i < arr.length; i++) {
row = arr[i];
// count multiple spaces as one character
rowCut = row.replace(/[ ]+/g, ' ');
if (!row.length) {
continue;
}
if (row[0] !== "<") {
if (sum >= limit) {
row = "";
} else if ((sum + rowCut.length) >= limit) {
cut = limit - sum;
if (row[cut - 1] === ' ') {
while(cut){
cut -= 1;
if(row[cut - 1] !== ' '){
break;
}
}
} else {
add = row.substring(cut).split('').indexOf(' ');
// break on halh of word
if(!wordBreak) {
if (add !== -1) {
cut += add;
} else {
cut = row.length;
}
}
}
row = row.substring(0, cut) + suffix;
if (moreLink) {
row += '<a href="' + moreLink + '"...