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

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

代码语言: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

相关推荐

  • 宝塔面板安装指定历史版本教程

    使用宝塔官方一键命令,直接搭建出来的是最新版的宝塔。但是,很多时候我们需要使用低版本的,这个时候就没有办法直接使用一键命令来搭建了。下面就讲讲怎么安装指定历史版本宝塔面板。 一、版本合集(2022年1月6日更新) http://download.bt.cn/install/update/LinuxPanel-1.0.3.zip http://download…

    2022年5月16日
    775
  • 安装zblog提示“创建c_option.php失败”的原因和解决办法

    有zblog用户反应在安装zblog的最后一步时提示“创建c_option.php失败”,如下图: 本文来说明下这个问题的原因和解决办法。 问题产生的原因: c_option.php是zblog的数据库配置文件,当安装完成的时候程序会自动创建这个文件。如果你的主机权限不足,那么程序就创建不了这个文件,就会出现这个提示了。 所以这个问题的原因就是你的主机权限不…

    2021年11月18日
    532
  • WordPress密码忘了_管理员密码找回的三种方法

    用WordPress安装完网站后,时间久了难免会碰到密码忘记的情况。管理员账号没有办法通过忘记密码找回功能,所以只能使用另外的方式,本文就介绍三种简单找回WordPress管理员密码的办法。 FTP修改functions.php找回 如果你记得你网站的FTP信息,那么你可以使用FTP软件来修改主题文件夹里面的functions.php文件实现密码修改。 通过…

    2024年8月11日
    122
  • WordPress主题存放在哪个文件夹?怎样快速删除WordPress主题?

    WordPress主题存放在哪个文件夹?今天老文遇到一个网友问到这个问题。我们都知道WP程序是一款后端程序,所有的功能都通过主题和插件实现的,程序有单独的存储主题的位置,我们只需要在对应的位置放上主题即可在后台激活当前主题使用。 1、WordPress主题存放文件夹 WordPress主题存放在 “wp-content/themes/&#8221…

    2022年4月3日
    417
  • 宝塔面板设置又拍云备份出现“API资料效验失败,请核实“提示的解决办法以及原因

    今天在宝塔面板设置备份网站,由于又拍云是有免费备份的存储空间的,所有就用又拍云备份网站,但是设置的时候出现了提示:“API资料效验失败,请核实“(如下图),倒腾了半天,后来找出了原因!下面博主来说说宝塔面板设置又拍云备份出现“API资料效验失败,请核实“提示的解决办法以及原因。 原因1:如果你是外网服务器,请关闭宝塔面板防火墙里面的禁止“国外访问”。 原因2…

    2021年8月12日
    847