文本隐藏时出现大量空白问题求助

你的问题核心是独立的<br>标签未被同步处理：带.vis类的<span>后面都跟着单独的<br>换行标签，但你的JS逻辑只控制了<span>的显示/隐藏，这些<br>会留在页面中占据空间，从而产生大量空白。

方案一：调整HTML结构（推荐） #

把每个<span>和对应的<br>包裹进同一个容器，让换行效果由容器的margin实现，避免依赖独立的<br>标签：

修改后的HTML #

<div>
  <!-- 原有p、li部分保持不变 -->
  <div class="vis-item"><span class="vis">mango</span></div>
  <div class="vis-item"><span class="vis">nachos</span></div>
  <div class="vis-item"><span class="vis">oranges</span></div>
  <div class="vis-item"><span class="vis">peaches</span></div>
  <div class="vis-item"><span class="vis">quiche</span></div>
  <div class="vis-item"><span class="vis">radishes</span></div>
  <div class="vis-item"><span class="vis">soup</span></div>
  <div class="vis-item"><span class="vis">tea</span></div>
</div>

补充CSS #

.vis-item {
  margin-bottom: 1rem; /* 替代br的换行间距 */
}

这样只需要控制.vis元素的显示隐藏，容器会自动跟随内容状态，不会残留空白。

方案二：修改JS逻辑（无需调整HTML） #

在处理.vis元素的同时，同步控制它后面紧邻的<br>标签的显示/隐藏：

修改后的JS代码 #

$('#snippets_search_box').keyup(function() {
  const valThis = this.value.toLowerCase();
  $('.vis').each(function() {
    const text = $(this).text().toLowerCase();
    const position = text.indexOf(valThis);

    if (position !== -1 && valThis.length > 0) {
      const matches = text.substring(position, valThis.length + position);
      const regex = new RegExp(matches, 'ig');
      // 用原始文本替换，避免多次搜索后残留mark标签
      const highlighted = $(this).text().replace(regex, `<mark>$&</mark>`);
      $(this).html(highlighted).show();
      $(this).next('br').show(); // 同步显示对应br
    } else {
      // 还原原始文本，清除高亮
      $(this).text($(this).text()).hide();
      $(this).next('br').hide(); // 同步隐藏对应br
    }
  });
});

额外优化点 #

• 提前将输入值转小写，减少重复处理
• 空输入时自动显示所有元素，避免误隐藏
• 用$&在正则替换中直接引用匹配内容，简化代码
• 隐藏时还原原始文本，防止多次搜索后残留<mark>标签

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