如何不破坏现有HTML结构为td单元格中逗号前的文本包裹span标签

需要为所有class为name的td单元格内，第一个逗号之前的文本包裹span标签，逗号前的内容为动态值，无法定向匹配固定文本。

现有HTML结构如下：

<td class="name">
 <a href="" title="" class="">lastName, firstName</a>
</td>

期望实现效果如下：

<td class="name">
 <a href="" title="" class=""><span>lastName</span>, firstName</a>
</td>

之前测试的代码均会破坏a标签原有结构，丢失href、title等属性，核心原因是直接修改td的整体html/text内容，覆盖了原有a标签结构。

只需精准定位到td内部的a标签，仅修改a标签的内部内容，即可完整保留a标签的所有属性，两种可行写法如下：

写法1：拆分文本实现（兼容无逗号的边界场景） #

$('td.name a').each(function() {
  const fullText = $(this).text();
  const commaIndex = fullText.indexOf(',');
  // 单元格内容无逗号时跳过处理
  if (commaIndex === -1) return;
  const beforeComma = fullText.slice(0, commaIndex);
  const afterComma = fullText.slice(commaIndex);
  $(this).html(`<span>${beforeComma}</span>${afterComma}`);
});

写法2：正则替换实现（代码更简洁） #

$('td.name a').html(function (_, originHtml) {
  // 匹配第一个逗号前的所有字符，包裹span，不影响后续内容
  return originHtml.replace(/^([^,]+)/, '<span>$1</span>');
});

两种写法均支持文本内存在多个逗号的场景，只会为第一个逗号之前的内容添加span包裹。

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