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

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

代码语言: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主题需要升级时,怎么保存之前主题所更改的设置

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

    2021年10月9日
    546
  • 不用插件启用 WordPress 维护模式

    为什么在线上调整网站时,要使用维护页面,让我们看一下维护页面的一些好处。有了维护页面,您可以… 可以避免访问者在打开您网站时,因维护原因出现一些糟糕的情况。 它可以帮助您正常地在网站的后端调整网站设置,主题或插件,而不会让访问者看到您的网站在维护时的全部细节。 在 WordPress 插件市场,有许多类似功能的插件,功能也非常强大。不过相对的,设置起来就比较…

    2021年11月7日
    552
  • 解决WordPress编辑器可视化/文本无法切换、添加媒体按钮失效

    最近在帮一个用户网站从win服务器搬家到linux服务器上,在安装调试WordPress的时候,发现编辑文章时,添加媒体的按钮和可视化/文本编辑切换都没反应,查找资料发现WordPress为了提高效率以及加载速度,把要用到的js连接在一起,如果没有结合在一起就会导致那些依赖js的功能失效,而部分主机可能由于环境配置不标准或禁用了某些相关函数,在这里还是要和大…

    2021年11月7日
    514
  • 怎样让zblog网站的访问速度变快?

    怎样让zblog网站的速度变快? 这个问题是很多zblog站长们都想知道的,这个问题比较大。本文仅以自己的角度来说明下,可能不那么全甚至不那么对!仅起一个抛砖引玉的作用,欢迎在本文下评论区域留言讨论。 首先,要想网站打开快。一个好的服务器是底子。如果你的服务器是是港台甚至是国外主机,那么在中国大陆打开你的站,快这个字大概率是跟你无缘的。 选服务器还是那句老话…

    2021年11月18日
    641
  • WordPress禁止右键防复制插件 WP-CopyRightPro

    WordPress禁止右键防复制插件 WP-CopyRightPro 是一款功能非常强大的 WordPress 版权保护插件,它能在一定程度上阻止您 WordPress 站点的内容被复制。通过该插件能有效地防止WordPress 博客中的文章内容被复制,但是不是百分之分防止,大概90%防复制。该插件的功能有:禁止选择文本内容、禁止在WordPress 使用右…

    2021年10月8日
    382