JavaScript 如何为文章自动添加脚注与链接

在网页内容的呈现中，脚注与链接能够极大地丰富文章信息，提升用户体验。借助 JavaScript，我们可以实现为文章自动添加脚注与链接，让内容更加专业和易读。

为文章添加脚注。我们可以通过 JavaScript 遍历文章的 DOM 节点，识别出需要添加脚注的文本部分。例如，在 HTML 中，我们可以给需要添加脚注的词或句子添加一个特定的类名，如“footnote - target”。

const footnoteTargets = document.querySelectorAll('.footnote - target');
footnoteTargets.forEach((target, index) => {
    const footnoteNumber = document.createElement('sup');
    footnoteNumber.textContent = index + 1;
    target.appendChild(footnoteNumber);

    const footnoteContent = document.createElement('div');
    footnoteContent.classList.add('footnote - content');
    footnoteContent.textContent = '这是对应的脚注内容';
    document.body.appendChild(footnoteContent);

    footnoteNumber.addEventListener('click', () => {
        footnoteContent.style.display = footnoteContent.style.display === 'none'? 'block' : 'none';
    });
});

上述代码中，我们先获取所有带有“footnote - target”类名的元素，为每个元素添加一个上标形式的脚注编号。同时创建一个包含脚注内容的 div 元素，并添加到页面中。通过点击脚注编号，能够显示或隐藏对应的脚注内容。

接下来，实现自动添加链接。如果文章中有一些特定的关键词，我们希望将其转换为链接。例如，识别文章中的人名，并将其链接到对应的介绍页面。

const articleText = document.body.textContent;
const names = ['张三', '李四'];
names.forEach(name => {
    const regex = new RegExp(name, 'g');
    const replacedText = articleText.replace(regex, `<a href="person - ${name}.html">${name}</a>`);
    document.body.innerHTML = replacedText;
});

这段代码通过正则表达式，将文章中的特定人名替换为带有链接的 HTML 标签。链接的 href 属性指向对应的介绍页面。

通过合理运用 JavaScript 的 DOM 操作和字符串处理功能，我们能够轻松为文章自动添加脚注与链接。这不仅能够提升文章的质量和可读性，还能为用户提供更丰富的信息获取途径，是优化网页内容展示的实用技巧。