自动将文章中的链接转为超链接

原创

半夜喝可乐

修改于 2023-10-11 21:35:02

2580

修改于 2023-10-11 21:35:02

最近在做一个论坛系统，使用了一下代码作为正文展示：

<div class="article-content">
    <?php echo $article['content']; ?>
</div>

这里用到的样式是“article-content”所以我直接在JS中对这个元素进行处理即可：

<script>
// 等待页面加载完成后执行
document.addEventListener("DOMContentLoaded", function() {
  // 获取文章内容元素
  var articleContent = document.querySelector(".article-content");

  // 正则表达式匹配链接的模式（排除已经是链接的内容和图片链接）
  var linkRegex = /(?<!<a\s[^>]*?)(?<!<img\s[^>]*?)(https?:\/\/\S+)/g;

  // 查找文章内容中的段落元素并替换链接
  var paragraphs = articleContent.getElementsByTagName("p");
  for (var i = 0; i < paragraphs.length; i++) {
    var paragraph = paragraphs[i];
    var paragraphHTML = paragraph.innerHTML;

    var replacedHTML = paragraphHTML.replace(linkRegex, function(match) {
      return '<a href="' + match + '" target="_blank">' + match + '</a>';
    });

    if (replacedHTML !== paragraphHTML) {
      paragraph.innerHTML = replacedHTML;
    }
  }
});
</script>

以上代码设置后发现链接好像并不会把文章中所有链接都转成超链接，另外如果是img图片，链接也可能会显示不正常，下面是我修改后的最终代码：

<script>
// 等待页面加载完成后执行
document.addEventListener("DOMContentLoaded", function() {
  // 获取文章内容元素
  var articleContent = document.querySelector(".article-content");

  // 正则表达式匹配链接的模式（排除图片链接）
  var linkRegex = /(?<!<img\s[^>]*?)(https?:\/\/\S+)/g;

  // 查找文章内容中的段落元素并替换链接
  var paragraphs = articleContent.getElementsByTagName("p");
  for (var i = 0; i < paragraphs.length; i++) {
    var paragraph = paragraphs[i];
    var paragraphHTML = paragraph.innerHTML;

    var replacedHTML = paragraphHTML.replace(linkRegex, function(match) {
      return '<a href="' + match + '" target="_blank">' + match + '</a>';
    });

    if (replacedHTML !== paragraphHTML) {
      paragraph.innerHTML = replacedHTML;
    }
  }
});
</script>

效果：