如何用JavaScript按单词数拆分字符串实现双div查看更多功能

嘿，我来帮你把按字符截取改成按单词数拆分，同时搞定「查看更多」的交互效果！咱们分PHP端处理和JavaScript交互两部分来实现：

一、PHP端：按单词数拆分内容 #

原来的substr是按字符截取，我们可以先把描述文本拆成单词数组，再精准截取前20个单词，剩下的放到另一部分。这里用preg_split更稳妥，能兼容多个空格、制表符等空白字符的情况：

<?php
if ($term && !empty($term->description)) {
    // 按一个或多个空白字符拆分单词，同时去掉首尾空白避免空元素
    $words = preg_split('/\s+/', trim($term->description));
    $totalWords = count($words);
    
    // 截取前20个单词并拼接成字符串
    $firstPart = implode(' ', array_slice($words, 0, 20));
    // 拼接剩余的单词
    $restPart = implode(' ', array_slice($words, 20));
?>
<div class="term-description">
    <div class="first-part"><?php echo $firstPart; ?></div>
    <?php if ($totalWords > 20) : ?>
        <div class="rest-part" style="display: none;"><?php echo $restPart; ?></div>
        <button class="toggle-more">查看更多</button>
    <?php endif; ?>
</div>
<?php } ?>

这里做了几个细节优化：

• 用trim()先清理文本首尾空白，避免拆分出空字符串
• 判断总单词数是否超过20，只有超过时才显示「查看更多」按钮和剩余内容
• 给剩余内容默认加display: none隐藏，符合初始需求

二、JavaScript：实现查看更多/收起交互 #

接下来添加JS代码，处理按钮点击时的显示/隐藏切换：

// 获取页面上所有的切换按钮
const toggleButtons = document.querySelectorAll('.toggle-more');

toggleButtons.forEach(button => {
    button.addEventListener('click', function() {
        const restContent = this.previousElementSibling;
        // 切换剩余内容的显示状态
        restContent.style.display = restContent.style.display === 'none' ? 'block' : 'none';
        // 同步切换按钮文本
        this.textContent = restContent.style.display === 'block' ? '收起' : '查看更多';
    });
});

这段代码会：

• 监听每个「查看更多」按钮的点击事件
• 切换对应剩余内容div的显示/隐藏状态
• 自动把按钮文本切换成「查看更多」或「收起」

额外提示 #

如果你的描述里包含HTML标签（比如<p>、<br>），直接按单词拆分可能会破坏标签结构。这种情况下，建议先提取纯文本处理，或者用DOM操作来拆分内容；如果是纯文本描述，上面的代码就完全够用啦！

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