如何使用jQuery在文本符号后添加span标签？附示例需求

这里有几种实用的方法可以达成你想要的效果，我给你整理了两个最常用的：

方法一：文本分割拼接法 #

这个方法直接操作文本内容，逻辑简单直观，适合h1里只有纯文本的场景：

$(document).ready(function() {
  $('h1').each(function() {
    // 获取当前h1的文本并去除首尾空格
    const fullText = $(this).text().trim();
    // 按"-"分割，兼容"-"前后有无空格的情况
    const textParts = fullText.split(/\s*-\s*/);
    
    if (textParts.length === 2) {
      // 重新拼接HTML结构，把副标题部分用span包裹
      $(this).html(`${textParts[0]} - <span>${textParts[1]}</span>`);
    }
  });
});

细节说明： #

• trim()：先清理文本首尾的多余空格，避免分割出无效的空内容
• split(/\s*-\s*/)：用正则表达式分割，\s*匹配任意数量的空格，不管-前后有没有空格都能精准拆分
• each()：如果页面存在多个h1标签，会逐个处理，不会只修改第一个

方法二：DOM节点精准操作法 #

如果你的h1标签里除了纯文本还有其他元素（比如<h1>Some <em>text</em> - subtitle starts here</h1>），可以用这个方法，不会破坏原有DOM结构：

$(document).ready(function() {
  $('h1').each(function() {
    // 筛选出h1内部包含"-"的文本节点
    $(this).contents().filter(function() {
      return this.nodeType === 3 && this.textContent.includes('-');
    }).each(function() {
      const text = this.textContent.trim();
      const parts = text.split(/\s*-\s*/);
      
      if (parts.length === 2) {
        // 创建新的文本节点和span元素
        const firstTextNode = document.createTextNode(`${parts[0]} - `);
        const subtitleSpan = $('<span>').text(parts[1])[0];
        // 用新节点替换原来的文本节点
        $(this).replaceWith(firstTextNode, subtitleSpan);
      }
    });
  });
});

适用场景： #

当h1内部混合了文本和其他HTML元素时，这个方法会精准定位到包含分隔符的文本节点，只修改需要的部分，不会影响已有元素。

小提示： #

如果你的h1里可能存在多个-，可以根据需求调整分割逻辑（比如用split('-', 2)只分割第一个-）。另外记得把代码放在$(document).ready()里，确保DOM加载完成后再执行操作。

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