如何在保留HTML的同时截断元素的文本内容？(How can I truncate the text contents of an Element while preserving HTML?)

 我意识到这里有几个类似的问题，但没有一个答案可以解决我的问题。 
 
 我需要能够获取元素的innerHTML并将其截断为给定的字符长度，同时考虑任何内部HTML元素的文本内容并保留所有HTML标记。 
 
 我找到了几个答案，涵盖了问题的这一部分以及几个插件都完全正确。 
 
 但是，在所有情况下，解决方案将直接在任何内部元素的中间截断，然后关闭标记。 
 
 在我的情况下，我需要所有内部标签的内容保持完整，基本上允许任何“将被”截断的内部标签超过给定的字符限制。 
 
 任何帮助将不胜感激。 
 
 编辑： 
 
 例如： 
 
 This is an example <a href="link">of a link</a> inside another element 
 
 以上是51个字符长，包括空格。 如果我想将其截断为23个字符，我们必须缩短</a>标记内的文本。 这正是大多数解决方案所做的。 
 
 这会给我以下内容： 
 
 This is an example <a href="link">of a</a> 
 
 但是，对于我的用例，我需要保持任何剩余的可见标记完整，并且不以任何方式截断。 
 
 因此，鉴于上面的示例，我想要的最终输出，当尝试截断为23个字符时，如下所示： 
 
 This is an example <a href="link">of a link</a> 
 
 所以基本上我们正在检查截断发生的位置。 如果它在元素之外，我们可以将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.

原文：https://stackoverflow.com/questions/32381804