如何使用jQuery从含|分隔符的字符串中移除特定内容提取目标文本

前提说明 #

• 待处理的字符串为固定格式：两类需求的核心分隔符为竖线|，第二类需求的每个片段符合标签: 内容的冒号分隔结构
• 此处jQuery仅用于从DOM元素中读取原始待处理文本，字符串拆分逻辑基于原生JS实现（jQuery本身无专属字符串处理API，仅负责DOM交互环节）
• 如果待处理文本存在元素的自定义属性（如data-label）中，将代码里的.text()替换为.attr('data-label')即可

需求1：从「Current year | Frequency」提取「Current year」 #

• 实现逻辑：按竖线拆分字符串，取第一个非空片段并去除首尾多余空格
• 代码示例：

// 1. 用jQuery从DOM读取原始文本，示例中选择器为class="date-tag"的元素
const rawStr = $('.date-tag').text().trim();
// 2. 用正则分割兼容竖线前后空格数量不固定的情况
const targetContent = rawStr.split(/\s*\|\s*/)[0];
// 最终输出值即为 "Current year"

需求2：从「Date range: Current year | Frequency: Daily」提取「Current year」和「Daily」 #

• 实现逻辑：先按竖线拆分出两个独立的「标签: 内容」片段，再对每个片段按冒号拆分，取冒号后的有效内容
• 代码示例：

// 1. 用jQuery从DOM读取原始文本，示例中选择器为id="filter-bar"的元素
const rawStr = $('#filter-bar').text().trim();
// 2. 先按竖线拆分得到独立片段
const segments = rawStr.split(/\s*\|\s*/);
// 3. 对每个片段按冒号拆分，取冒号后的内容，兼容冒号后多空格的场景
const dateRangeContent = segments[0].split(/:\s*/)[1].trim(); // 输出 "Current year"
const frequencyContent = segments[1].split(/:\s*/)[1].trim(); // 输出 "Daily"

鲁棒性优化（可选） #

• 为避免字符串格式异常（如缺少冒号、竖线）导致代码报错，可增加空值判断的封装方法：

// 封装通用的冒号后内容提取方法
function getValueAfterColon(segment) {
  if (!segment) return '';
  const parts = segment.split(/:\s*/);
  return parts.length > 1 ? parts[1].trim() : '';
}
// 调用替换原有拆分逻辑
const dateRangeContent = getValueAfterColon(segments[0]);
const frequencyContent = getValueAfterColon(segments[1]);

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