How can I truncate the text contents of an Element while preserving HTML?

I realize that there are several similar questions here but none of the answers solve my case.

I need to be able to take the innerHTML of an element and truncate it to a given character length with the text contents of any inner HTML element taken into account and all HTML tags preserved.

I have found several answers that cover this portion of the question fine as well as several plugins which all do exactly this.

However, in all cases the solution will truncate directly in the middle of any inner elements and then close the tag.

In my case I need the contents of all inner tags to remain intact, essentially allowing any "would be" truncated inner tags to exceed the given character limit.

Any help would be greatly appreciated.

EDIT:

For example:

This is an example <a href="link">of a link</a> inside another element

The above is 51 characters long including spaces. If I wanted to truncate this to 23 characters, we would have to shorten the text inside the </a> tag. Which is exactly what most solutions out there do.

This would give me the following:

This is an example <a href="link">of a</a>

However, for my use case I need to keep any remaining visible tags completely intact and not truncated in any way.

So given the above example, the final output I would like, when attempting to truncate to 23 characters is the following:

This is an example <a href="link">of a link</a>

So essentially we are checking where the truncation takes place. If it is outside of an element we can split the HTML string to exactly that length. If on the other hand it is inside an element, we move to the closing tag of that element, repeating for any parent elements until we get back to the root string and split it there instead.

Solution

It sounds like you'd like to be able to truncate the length of your HTML string as a text string, for example consider the following HTML:

'<b>foo</b> bar'

In this case the HTML is 14 characters in length and the text is 7. You would like to be able to truncate it to X text characters (for example 2) so that the new HTML is now:

'<b>fo</b>'

Disclosure: My answer uses a library I developed.

You could use the HTMLString library - Docs : GitHub.

The library makes this task pretty simple. To truncate the HTML as we've outlined above (e.g to 2 text characters) using HTMLString you'd use the following code:

var myString = new HTMLString.String('<b>foo</b> bar');
var truncatedString = myString.slice(0, 2);
console.log(truncatedString.html());

EDIT: After additional information from the OP.

The following truncate function truncates to the last full tag and caters for nested tags.

function truncate(str, len) {
    // Convert the string to a HTMLString
    var htmlStr = new HTMLString.String(str);

    // Check the string needs truncating
    if (htmlStr.length() <= len) {
        return str;
    }

    // Find the closing tag for the character we are truncating to
    var tags = htmlStr.characters[len - 1].tags();
    var closingTag = tags[tags.length - 1];

    // Find the last character to contain this tag
    for (var index = len; index < htmlStr.length(); index++) {
        if (!htmlStr.characters[index].hasTags(closingTag)) {
            break;
        }
    }

    return htmlStr.slice(0, index);
}

var myString = 'This is an <b>example ' +
    '<a href="link">of a link</a> ' +
    'inside</b> another element';

console.log(truncate(myString, 23).html());
console.log(truncate(myString, 18).html());

This will output:

This is an <b>example <a href="link">of a link</a></b>
This is an <b>example <a href="link">of a link</a> inside</b>