javascript - 如何在保留 HTML 的同时 chop 元素的文本内容？

Question

我意识到这里有几个类似的问题，但没有一个答案能解决我的问题。

我需要能够接受 innerHTML元素并将其 chop 为给定的字符长度，同时考虑任何内部 HTML 元素的文本内容并保留所有 HTML 标记。

我找到了几个很好地涵盖了这部分问题的答案，以及几个插件都可以做到这一点。

但是，在所有情况下，解决方案都会直接在任何内部元素的中间 chop ，然后关闭标签。

在我的例子中，我需要所有内部标签的内容保持完整，基本上允许任何“将被” chop 的内部标签超过给定的字符限制。

如有任何帮助，我们将不胜感激。

编辑:

例如:

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

以上是 51 个字符长，包括空格。如果我想将其 chop 为 23 个字符，我们将不得不缩短 </a> 中的文本标签。这正是大多数解决方案所做的。

这会给我以下内容:

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

但是，对于我的用例，我需要保持所有剩余的可见标签完整无缺，并且不以任何方式被 chop 。

鉴于上面的示例，当尝试 chop 为 23 个字符时，我想要的最终输出如下:

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

所以基本上我们是在检查 chop 发生的地方。如果它在元素之外，我们可以将 HTML 字符串拆分为恰好该长度。另一方面，如果它在 inside 元素中，我们将移动到该元素的结束标记，对所有父元素重复，直到我们返回到根字符串并将其拆分在那里。

Answer 1

听起来您希望能够将 HTML 字符串的长度 chop 为文本字符串，例如考虑以下 HTML:

'<b>foo</b> bar'

在这种情况下，HTML 的长度为 14 个字符，文本长度为 7。您希望能够将其 chop 为 X 个文本字符(例如 2)，以便新的 HTML 是现在:

'<b>fo</b>'

披露:我的答案使用了我开发的库。

您可以使用 HTMLString 库 - Docs : GitHub .

库使这项任务变得非常简单。要使用 HTMLString chop 我们上面概述的 HTML(例如， chop 2 个文本字符)，您需要使用以下代码:

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

编辑:从 OP 获取更多信息后。

以下 chop 函数 chop 到最后一个完整标记并满足嵌套标记的需要。

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 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>