如何在HTML中实现点击三点展开< >间隐藏代码片段的功能

核心思路 #

• 识别页面中所有被<>包裹的内容
• 默认状态隐藏尖括号内部的完整内容，仅展示<...>作为可点击触发器
• 点击触发器时切换样式，在完整内容和省略号状态之间切换

原生JS+CSS实现（无第三方依赖） #

步骤1：添加样式 #

/* 折叠容器基础样式 */
.collapse-angle-bracket {
  display: inline-block;
  cursor: pointer;
  vertical-align: baseline;
  color: inherit;
}
/* 默认隐藏完整内容，显示省略号 */
.collapse-angle-bracket .full-content {
  display: none;
}
.collapse-angle-bracket .collapse-dots {
  padding: 0 2px;
  color: #666;
}
/* 展开状态切换显示逻辑 */
.collapse-angle-bracket.expanded .full-content {
  display: inline;
}
.collapse-angle-bracket.expanded .collapse-dots {
  display: none;
}

步骤2：添加JS逻辑 #

以下代码会自动遍历页面所有文本节点，给符合<>格式的内容自动添加折叠效果，无需手动修改原有HTML结构：

document.addEventListener('DOMContentLoaded', function() {
  // 筛选所有非脚本、非样式的文本节点
  const textWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: node => 
        ['SCRIPT', 'STYLE', 'CODE'].includes(node.parentElement.tagName) 
          ? NodeFilter.FILTER_REJECT 
          : NodeFilter.FILTER_ACCEPT
    },
    false
  );

  const textNodes = [];
  let node;
  while(node = textWalker.nextNode()) {
    textNodes.push(node);
  }

  // 替换匹配到的尖括号内容为折叠结构
  const angleBracketRegex = /<([^>]+)>/g;
  textNodes.forEach(textNode => {
    const rawText = textNode.textContent;
    if (!angleBracketRegex.test(rawText)) return;

    const replacedHtml = rawText.replace(angleBracketRegex, (match, innerContent) => {
      // 转义特殊字符避免HTML注入
      const escapedContent = innerContent
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
      return `
        <span class="collapse-angle-bracket">
          &lt;<span class="full-content">${escapedContent}</span><span class="collapse-dots">...</span>&gt;
        </span>
      `;
    });

    const tempWrapper = document.createElement('span');
    tempWrapper.innerHTML = replacedHtml;
    textNode.parentNode.replaceChild(tempWrapper, textNode);
  });

  // 绑定点击切换事件
  document.querySelectorAll('.collapse-angle-bracket').forEach(collapseEl => {
    collapseEl.addEventListener('click', () => {
      collapseEl.classList.toggle('expanded');
    });
  });
});

额外配置说明 #

• 如果需要指定某段尖括号内容默认展开，只需给对应的.collapse-angle-bracket元素手动添加expanded类即可
• 可以自行修改CSS调整省略号、展开内容的样式适配你的页面风格
• 代码中已加入特殊字符转义逻辑，避免HTML注入风险，可直接用于生产环境

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