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

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

代码语言:javascript
复制
<div class="article-content">
    <?php echo $article['content']; ?>
</div>

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

代码语言:javascript
复制
<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="'%20+ match + '" target="_blank">'%20+ match + '</a>';
    });

    if (replacedHTML !== paragraphHTML) {
      paragraph.innerHTML = replacedHTML;
    }
  }
});
</script>
自动将文章中的链接转为超链接

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

代码语言:javascript
复制
<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="'%20+ match + '" target="_blank">'%20+ match + '</a>';
    });

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

效果:

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

关于自动将文章中的链接转为超链接的相关内容;如有侵权,请联系老文删除。

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
老文的头像老文
上一篇 2024年7月31日 上午11:37
下一篇 2024年7月31日 上午11:50

相关推荐

  • 加快WordPress网站的图片加载速度的方法

    图像对于吸引和保持读者的兴趣非常重要。但是,它们也是网络上加载速度最慢的元素之一。加载缓慢可能会导致访问者放弃您的网站,因此解决图片加载慢的问题尤为重要! 如果您想要一个更轻、更快的网站,那么图像优化是一个不错的起点。通过优化,您可以继续以美观、高质量的视觉效果吸引观众的注意力,而不会显着增加页面加载时间。 1.选择正确的文件格式在开始优化图像之前,重要的是…

    2021年8月12日
    379
  • zblog提示“授权文件非法“的终极解决办法

    最近一段时间有很多的用户遇到了这个“授权文件非法”的提示,这是由于zblog的应用中心插件调整了规则导致的。 之前本站写过一篇“zblog报错“授权文件非法”的错误原因和解决办法”的文章,但是还是有用户反应按照教程操作了之后还是提示“授权文件非法”。 这个时候请用本文所介绍的终极解决办法,一次解决“授权文件非法“问题: 1、打开你网站后台–插件管…

    2021年11月18日
    586
  • 使用测速脚本对 Linux 服务器进行测速

    最近又搞了个美国的服务器来学习,但是发现在国内直连速度特别慢,就想知道一下他的速度到底怎么样?在厘米大神那找了个综合测速脚本进行测速,并记录如下! 使用 root 账号登陆服务器,输入以下指令: wget -qO- bench.sh | bash 通过这个测速脚本,缙哥哥发现服务器方面,Pump Cloud 是真的不错,阿里云次之,最近买来学习Linux的那…

    2021年8月12日
    420
  • WordPress程序网站更换域名后文章图片不显示的解决方法

    最近换了域名,发现网站图片不显示,经过一番折腾研究,把Wordpress更换域名后文章图片不显示的问题解决了,先把解决方法总结如下。  插件修改解决 1)安装插件 在Wordpress管理后台 ——》 插件 ——》 安装插件 ——》 搜索插件 ”Velvet Blues Update URLs“ ——》 安装 ——》 启用 2)修改解决 在左侧”工具“ ——…

    2022年3月3日
    771
  • 当WordPress主题需要升级时,怎么保存之前主题所更改的设置

    当WordPress主题需要升级时,怎么保存之前主题所更改的设置 所以我找到了个WordPress插件:Child Theme Wizard 步骤: 登录到您的 WordPress 后台 >> 插件 >> 安装插件,在右上角的搜索框里搜索“Child Theme Wizard”,找到同名插件(大约在第一项),安装并激活该插件。 激活插…

    2021年10月9日
    538