如何用jQuery提取h6标签内带特殊字符的数字并包裹为div？

算力阿峰

2026-8-9

提取H6标签内方括号包裹的编号并包裹到Div中

可以利用方括号的明确边界来精准提取编号，完全不需要复杂正则，避免标题内连字符的干扰，具体实现如下：

jQuery 实现方案

$('h6').each(function() {
  const $el = $(this);
  const fullContent = $el.text();
  // 定位方括号的位置
  const bracketStart = fullContent.indexOf('[');
  const bracketEnd = fullContent.indexOf(']');

  // 验证方括号的有效性
  if (bracketStart > -1 && bracketEnd > bracketStart) {
    // 提取编号和标题文本
    const numContent = fullContent.slice(bracketStart + 1, bracketEnd);
    const titleContent = fullContent.slice(bracketEnd + 1).trim();
    // 重构H6内部结构
    $el.html(`
      <div class="number">${numContent}</div>
      ${titleContent}
    `);
  }
});

原生JavaScript 实现方案

如果你不想依赖jQuery，用原生JS也能实现：

document.querySelectorAll('h6').forEach(el => {
  const fullContent = el.textContent;
  const bracketStart = fullContent.indexOf('[');
  const bracketEnd = fullContent.indexOf(']');

  if (bracketStart > -1 && bracketEnd > bracketStart) {
    const numContent = fullContent.slice(bracketStart + 1, bracketEnd);
    const titleContent = fullContent.slice(bracketEnd + 1).trim();

    // 创建编号Div
    const numDiv = document.createElement('div');
    numDiv.className = 'number';
    numDiv.textContent = numContent;

    // 重置H6内容并插入新元素
    el.innerHTML = '';
    el.appendChild(numDiv);
    el.appendChild(document.createTextNode(` ${titleContent}`));
  }
});