JavaScript 实现字符串截取与点击展开收起效果

效果目标与原理

实现的目标是：默认状态下，容器内的文本仅显示前 N 个字符，超出部分以“...”或“展开”按钮暗示；用户点击该按钮后，恢复显示全部原始文本。其核心逻辑如下：

• 截取字符串：获取容器原有 HTML 内容，利用 substring(0, length) 提取前段文本。
• 构建 UI 结构：创建一个新的 <span> 承载截取后的文本，创建一个 <a> 作为开关按钮（如“...”或“收起”）。
• 重置容器：清空原容器内容，将新创建的 <span> 和 <a> 追加进去。
• 交互反馈：为开关按钮绑定 onclick 事件，判断当前状态，切换文本显示内容及按钮文字。

第1步：准备 HTML 结构与脚本入口

首先定义一个包含长文本的容器 <div>，并编写初始化脚本。脚本应在窗口加载完毕后执行，确保 DOM 元素已就绪。

<div id="text-container">
这里是需要截取的长文本内容...</div>
<script type="text/javascript">
// 脚本将在下面详细编写
window.onload = function() {
    cutStr();
};
</script>

第2步：编写截取与重构逻辑

定义核心函数 cutStr，获取 DOM 元素及原始文本，计算截取位置，并重新组装 DOM。

function cutStr() {
    var odiv = document.getElementById("text-container");
    var str = odiv.innerHTML;
    var limitLength = 20; // 设定截取长度
    
    // 1. 创建用于显示截断文本的 Span
    var ospan = document.createElement("span");
    ospan.innerHTML = str.substring(0, limitLength);
    
    // 2. 创建用于切换状态的 Link
    var olink = document.createElement("a");
    // 如果原文长度超过限制，显示省略号提示，否则不显示
    olink.innerHTML = (str.length > limitLength) ? "..." : "";
    olink.href = "###";
    olink.style.cursor = "pointer"; // 可选：添加手型光标增强交互感
    
    // 3. 清空原容器并追加新元素
    odiv.innerHTML = "";
    odiv.appendChild(ospan);
    if (olink.innerHTML !== "") {
        odiv.appendChild(olink);
    }
    
    // 4. 绑定点击事件
    olink.onclick = function() {
        // 这里需要在后续步骤完善状态切换逻辑
    };
}

第3步：完善展开/收起状态切换

在 olink.onclick 中判断当前是“收起”还是“展开”状态，并相应地修改 ospan 的内容和 olink 的文字。

// 接上一步 olink.onclick 内部逻辑
olink.onclick = function() {
    if (olink.innerHTML === "...") {
        // 当前为收起状态 -> 点击后展开
        olink.innerHTML = "收起";
        ospan.innerHTML = str; // 恢复全量文本
    } else {
        // 当前为展开状态 -> 点击后再次收起
        olink.innerHTML = "...";
        ospan.innerHTML = str.substring(0, limitLength); // 恢复截断文本
    }
};

关键参数与注意事项

1. 字符计数差异：
JavaScript 中的 length 属性和 substring 基于 UTF-16 编码单元。对于大部分常见中文和英文，每个字符长度为1。但若包含 Emoji 或特定 surrogate pairs，实际视觉字符数可能与代码长度有偏差。若需精确按视觉字符截断，需使用正则表达式或第三方库。

2. 内联样式建议：
为了美化“...”或“收起”按钮，建议在 CSS 中为 a 标签设置样式，例如去除下划线、改变颜色或添加间距：
a { color: #007bff; text-decoration: none; margin-left: 5px; }

3. 安全性考量：
示例代码中直接使用 innerHTML 赋值。若文本来源包含用户输入，需注意 XSS 风险。在实际生产环境中，若内容不可信，建议使用 textContent 进行安全赋值，或使用框架提供的数据绑定机制。

简要总结

通过上述步骤，我们实现了一个轻量级的文本截断与展开功能。它无需依赖任何第三方库，仅使用原生 JavaScript 即可快速集成到现有项目中，有效平衡了页面空间利用率与信息完整性。以上就是 JavaScript 实现字符串截取与点击展开收起效果的详细内容，更多关于 JavaScript DOM 操作优化的资料请关注本站其它相关文章！