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

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

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

相关推荐

  • 怎样挖掘长尾词?目标关键词和长尾关键词的区别?

    怎样挖掘长尾词?目标关键词和长尾关键词的区别? 目标关键词 你的目标客户最可能使用和搜索的关键词,我们往往用首页来优化它们。 目标关键词一般作为网站首页的标题,以是2-4个字构成的一个词或词组,名词居多,网站的主要内容需围绕网站产品和服务来设定,网站的主要内容围绕目标关键词展开。 一般通过百度指数和竞争对手分析,确定目标关键词。 长尾关键词 长尾关键词是指网…

    2022年5月13日
    324
  • wordpress网站免插件安装sitemap地图

    有时候因为装多了插件导致网站很卡,今天小编来说说纯代码免插件制作站点地图的方法。 对于一些有一定技术基础的站长来说,总是使用插件感觉与自己的身份不匹配,总想着自己写一些代码出来炫耀一下。那就使用下面的免插件制作站点地图吧。 使用Dreamweaver CS6软件新建一个空白的HTML页面;将以下的代码粘贴到HTML页面里(一定要在代码模式下粘贴噢); &lt…

    2021年9月2日
    369
  • 腾讯轻量服务器挂载云硬盘的方法

    操作步骤 使用控制台挂载云硬盘 登录 云硬盘控制台。 在云硬盘列表页,您可以通过以下方法挂载云硬盘: 挂载单个云硬盘:选择状态为“待挂载”的云硬盘所在行右侧的更多 > 挂载。 批量挂载云硬盘:勾选状态为“待挂载”的云硬盘,单击云硬盘列表上方的挂载进行批量挂载。 弹出“挂载到实例”窗口,进入“挂载到实例”步骤。如下图所示: 选择需挂载的实例,并参考以下信…

    2022年11月27日
    127
  • WordPress 使用 ElasticSearch 搜索方法

    众所周知,ElasticSearch (下文简称ES)是一个相当牛逼的全文搜索引擎,对接它以后,WordPress 的搜索也能变得更智能更优秀,此文章将介绍如果用最简单的方法部署一个 ES 服务器并对接到 WordPress 网站。 主注意:ES 是个吃性能的怪兽,不太建议内存<4G的服务器安装之。 一、安装 Podman 容器管理器 为了便于维护以及…

    2022年4月13日
    913
  • 没有备案的国际域名申请QQ互联的方法

    没有备案的国际域名申请QQ互联的方法 目前亲测 .com后缀域名都可以,其他国际域名也可以试试,正常是可以的。 QQ互联官网 https://connect.qq.com/index.html 1、先去QQ互联申请网站应用 网站北岸号填写:【海外网站/国际网站】 非国内网站申请QQ互联登陆(国际域名) 2、下载表格,填好表格 给腾讯发送申请邮件 参考:htt…

    2021年10月9日
    531