React中为长HTML字符串添加查看更多按钮的实现方法

嗨，这个需求在内容展示场景里太常见了，我来给你分享几种不同技术栈下的靠谱实现方式，确保不会破坏HTML结构，还能精准控制字符长度～

一、原生JavaScript实现（纯静态页面适用） #

这种方式不需要任何框架，直接用原生JS就能搞定。核心思路是：先处理HTML内容的字符长度判断，避免直接截断HTML导致标签未闭合，然后通过按钮切换内容的显示状态。

步骤说明： #

1. 先将HTML字符串转换为纯文本，统计实际可读字符数（避免HTML标签的字符干扰统计）。
2. 如果字符数超过1000，就渲染截取后的内容+“查看更多”按钮；否则直接显示全部内容。
3. 点击按钮时切换为显示完整内容，同时隐藏按钮。

代码示例： #

<div id="article-container"></div>

<script>
// 假设这是从API获取的HTML内容
const articleHtml = '<p>这是一段很长的HTML内容...（省略N多字符）</p><h3>二级标题</h3><p>更多内容...</p>';

const container = document.getElementById('article-container');
const maxLength = 1000;

// 把HTML转成纯文本，用于统计字符数
function htmlToText(html) {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;
  return tempDiv.textContent || tempDiv.innerText || '';
}

const textLength = htmlToText(articleHtml).length;

if (textLength > maxLength) {
  // 这里用安全的方式截取内容：先插入完整HTML，再通过DOM操作截断
  container.innerHTML = articleHtml;
  let currentLength = 0;
  let isTruncated = false;

  // 遍历文本节点，累计字符数
  function traverseNodes(node) {
    if (isTruncated) return;
    if (node.nodeType === Node.TEXT_NODE) {
      const remaining = maxLength - currentLength;
      if (node.textContent.length > remaining) {
        node.textContent = node.textContent.slice(0, remaining) + '...';
        isTruncated = true;
        // 添加查看更多按钮
        const moreBtn = document.createElement('button');
        moreBtn.textContent = '查看更多';
        moreBtn.addEventListener('click', () => {
          container.innerHTML = articleHtml; // 重新渲染完整内容
        });
        container.appendChild(moreBtn);
      } else {
        currentLength += node.textContent.length;
      }
    } else {
      for (let child of node.childNodes) {
        traverseNodes(child);
      }
    }
  }

  traverseNodes(container);
} else {
  container.innerHTML = articleHtml;
}
</script>

二、Vue.js实现（Vue2/Vue3通用） #

如果你的项目用Vue，我们可以利用响应式状态来控制内容的显示，逻辑更简洁：

代码示例： #

<template>
  <div class="article-content">
    <div v-html="displayContent"></div>
    <button v-if="isShowMore" @click="isShowFull = true">查看更多</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 从API获取的HTML内容
const articleHtml = ref('<p>很长的HTML内容...</p>');
const maxLength = 1000;
const isShowFull = ref(false);

// 计算纯文本长度
const textLength = computed(() => {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = articleHtml.value;
  return tempDiv.textContent?.length || 0;
});

// 判断是否需要显示查看更多按钮
const isShowMore = computed(() => textLength.value > maxLength && !isShowFull.value);

// 计算要显示的内容
const displayContent = computed(() => {
  if (isShowFull.value || textLength.value <= maxLength) {
    return articleHtml.value;
  }
  // 这里同样用安全方式处理截断（避免破坏HTML结构）
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = articleHtml.value;
  let currentLength = 0;
  let isTruncated = false;

  function traverseNodes(node) {
    if (isTruncated) return;
    if (node.nodeType === Node.TEXT_NODE) {
      const remaining = maxLength - currentLength;
      if (node.textContent.length > remaining) {
        node.textContent = node.textContent.slice(0, remaining) + '...';
        isTruncated = true;
      } else {
        currentLength += node.textContent.length;
      }
    } else {
      for (let child of node.childNodes) {
        traverseNodes(child);
      }
    }
  }

  traverseNodes(tempDiv);
  return tempDiv.innerHTML;
});
</script>

三、React实现 #

React项目中可以用useState控制显示状态，结合DOM操作处理内容截断：

代码示例： #

import { useState, useMemo } from 'react';

function ArticleContent({ articleHtml }) {
  const [isShowFull, setIsShowFull] = useState(false);
  const maxLength = 1000;

  // 计算纯文本长度
  const textLength = useMemo(() => {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = articleHtml;
    return tempDiv.textContent?.length || 0;
  }, [articleHtml]);

  // 处理要显示的内容
  const displayContent = useMemo(() => {
    if (isShowFull || textLength <= maxLength) {
      return articleHtml;
    }
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = articleHtml;
    let currentLength = 0;
    let isTruncated = false;

    function traverseNodes(node) {
      if (isTruncated) return;
      if (node.nodeType === Node.TEXT_NODE) {
        const remaining = maxLength - currentLength;
        if (node.textContent.length > remaining) {
          node.textContent = node.textContent.slice(0, remaining) + '...';
          isTruncated = true;
        } else {
          currentLength += node.textContent.length;
        }
      } else {
        for (let child of node.childNodes) {
          traverseNodes(child);
        }
      }
    }

    traverseNodes(tempDiv);
    return tempDiv.innerHTML;
  }, [articleHtml, isShowFull, textLength]);

  return (
    <div className="article-content">
      <div dangerouslySetInnerHTML={{ __html: displayContent }} />
      {textLength > maxLength && !isShowFull && (
        <button onClick={() => setIsShowFull(true)}>查看更多</button>
      )}
    </div>
  );
}

export default ArticleContent;

关键注意点 #

• 避免直接截断HTML字符串：如果直接对HTML字符串做slice(0, 1000)，很可能会把标签截断（比如<p>内容变成<p>内），导致页面DOM结构错乱。上面的方案都是通过遍历DOM文本节点来截断，更安全。
• 字符长度统计：如果需求是统计可读文本的字符数，一定要先把HTML转成纯文本再计算，不要直接用HTML字符串的长度（因为标签会占字符数）。

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