如何使用jQuery实现排除HTML标签的字符串截断（含末尾句号规则）

下面是满足需求的jQuery实现方案，核心通过DOM节点遍历处理HTML结构，避免直接操作字符串导致的标签不合法问题：

实现代码 #

function truncateHtmlWithRules(html, maxLength = 50) {
  // 创建临时DOM容器存放输入HTML
  const $tempContainer = $('<div>').html(html);
  let totalPlainText = '';
  const nodeStructure = [];

  // 递归遍历所有节点，收集文本内容与节点结构信息
  function traverseNodes(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      const textContent = node.textContent.trim();
      if (textContent) {
        nodeStructure.push({
          type: 'text',
          content: textContent,
          originNode: node
        });
        totalPlainText += textContent;
      }
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      const elementInfo = {
        type: 'element',
        tag: node.tagName.toLowerCase(),
        originNode: node,
        children: []
      };
      nodeStructure.push(elementInfo);
      Array.from(node.childNodes).forEach(child => {
        traverseNodes(child);
      });
    }
  }

  traverseNodes($tempContainer[0]);

  // 文本长度未达限制，直接返回原HTML
  if (totalPlainText.length <= maxLength) {
    return html;
  }

  // 确定截断位置：优先取50字符内最后一个句号的位置
  let truncatePosition = maxLength;
  const textSegment = totalPlainText.substring(0, maxLength);
  const lastDotIndex = textSegment.lastIndexOf('.');
  if (lastDotIndex !== -1) {
    truncatePosition = lastDotIndex + 1; // 包含句号本身
  }

  // 重建符合截断规则的DOM结构
  let currentTextLength = 0;
  const $resultContainer = $('<div>');
  let currentParent = $resultContainer;
  const elementStack = [];

  function buildTruncatedDom(structureList) {
    for (const nodeInfo of structureList) {
      if (currentTextLength >= truncatePosition) break;

      if (nodeInfo.type === 'element') {
        const $newElement = $(`<${nodeInfo.tag}>`);
        currentParent.append($newElement);
        elementStack.push(currentParent);
        currentParent = $newElement;
        // 递归处理子节点
        buildTruncatedDom(nodeInfo.children);
        currentParent = elementStack.pop();
      } else if (nodeInfo.type === 'text') {
        const remainingChars = truncatePosition - currentTextLength;
        if (nodeInfo.content.length <= remainingChars) {
          currentParent.append(document.createTextNode(nodeInfo.content));
          currentTextLength += nodeInfo.content.length;
        } else {
          const truncatedText = nodeInfo.content.substring(0, remainingChars);
          currentParent.append(document.createTextNode(truncatedText));
          currentTextLength += truncatedText.length;
          break;
        }
      }
    }
  }

  buildTruncatedDom(nodeStructure);

  return $resultContainer.html();
}

// 使用示例
const testHtml = '<div>这是一段带有<strong>HTML标签</strong>的测试文本，这里有一个句号。还有额外内容用来填充长度，确保纯文本超过50字符限制。</div>';
const result = truncateHtmlWithRules(testHtml);
console.log(result);

核心逻辑说明 #

1. DOM节点遍历：将输入HTML转为DOM元素后递归遍历，分离纯文本与HTML结构，避免直接字符串操作破坏标签合法性
2. 截断规则处理：先判断50字符范围内是否存在句号，优先截断到最后一个句号位置；若无则按50字符截断
3. 结构重建：通过栈管理元素层级，确保截断后的HTML标签正确嵌套、闭合，输出合法结构

内容的提问来源于stack exchange，提问作者Swati Gupta