如何根据a标签子元素文本值自动生成符合规范的锚点链接

需求合理性判断 #

这个需求完全合理，是业内通用的语义化锚点生成规则：锚点全小写、空格替换为连字符的处理方式符合URL命名规范，无特殊字符兼容性强，同时锚点和对应文本强关联，可读性和可维护性都很高，和大多数静态站点生成器、CMS系统的默认锚点生成逻辑一致。

实现方案 #

手动修改方案 #

直接对应修改href属性即可，修改后的代码如下：

<a href="#application">
  <strong>Application</strong>
</a>

<a href="#application-review">
  <strong>Application Review</strong>
</a>

批量自动处理方案（原生JS） #

如果需要处理大量同类链接，可以用JS自动生成锚点，代码示例如下：

// 按需调整选择器匹配你需要处理的a标签
const targetLinks = document.querySelectorAll('a');

targetLinks.forEach(link => {
  // 提取strong标签内的文本，去除首尾空白
  const textContent = link.querySelector('strong').textContent.trim();
  // 生成符合规则的锚点
  const anchor = '#' + textContent.toLowerCase().replaceAll(' ', '-');
  // 赋值给href属性
  link.href = anchor;
});

如果后续需要处理带特殊字符的文本，只需要在生成锚点的步骤补充对应的字符替换规则即可。

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