jQuery如何从文本字符串中匹配独立数字并为其添加href链接标签

解决方案 #

直接使用字符串的replace方法配合正则全局替换即可，不需要单独提取数字再挨个处理，不会改动未匹配到的其余文本内容：

基础实现（匹配所有数字） #

如果所有文本内的数字都需要加锚点链接，可以直接用以下代码：

// 注意类选择器需要加.前缀，原代码此处有误
var val = $(".description span").html();
if (val) {
  // 全局匹配所有数字，逐个替换为带锚点的链接
  var processedContent = val.replace(/\d+/g, function(num) {
    return `<a href="myindex.html#${num}">${num}</a>`;
  });
  // 把处理后的内容写回原元素
  $(".description span").html(processedContent);
}

优化实现（仅匹配括号内的数字） #

如果不想误改文本里其他不需要加链接的数字，只处理括号包裹的数字，可以调整正则为分组匹配：

var val = $(".description span").html();
if (val) {
  // 仅匹配括号包裹的数字，第一个分组捕获数字内容
  var processedContent = val.replace(/\((\d+)\)/g, function(matchStr, num) {
    // 保留原括号，只把数字部分替换为链接
    return `(<a href="myindex.html#${num}">${num}</a>)`;
  });
  $(".description span").html(processedContent);
}

说明 #

replace方法传入回调函数时，每匹配到一个符合规则的片段就会触发一次回调，返回值就是替换后的内容，全程不会修改没有匹配到的其余文本，完全符合你的需求。

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