`
think1991
  • 浏览: 21118 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

JS将网址转换成可点击的超链接

阅读更多
最近在做一个留言板项目,需要把普通的文本链接URL转换成可点击的超链接,当时想的方法直接修改源代码来实现,但经过搜索发现其实还有更简单的方法可以轻松实现,对于我这等“懒人”来说,一定会认真考虑,经过测试发现,效果非常的不错,所有的链接都能准确无误的转换,关键只是一小段JS代码就可以搞定,且兼容性非常好,整理分享给大家。

注意:在需要转换链接的区域地方加上id=container

然后在网站的底部放上如下代码即可
<script>
window.onload=function(){
  var div = document.getElementById("container");
  var s=div.innerHTML;
var re = /(http:\/\/[\w.\/]+)(?![^<]+>)/gi;
  div.innerHTML=s.replace(re,"<a href='$1' target='_blank'>$1</a>");
}
</script>
分享到:
评论

相关推荐

    WPS中如何自动取消网址超链接.docx

    取消勾选后,WPS 将不再自动将输入的网址转换成超链接的形式。这样,我们就可以输入网址而不必担心它会被自动转换成超链接。 需要注意的是,这个方法只能取消 WPS 中网址自动转换为超链接的功能,而不能取消超链接...

    ExtJs表格点击超链接获取行的值

    ### ExtJs表格点击超链接获取行的值:深入解析与应用 #### 一、ExtJs表格超链接渲染 在ExtJs框架中,我们经常需要在表格(`Ext.grid.Panel`)中显示超链接,并且当用户点击这些超链接时,能够获取到当前行的数据。...

    一个简单的qt测试点击超链接时,将文本框内容改为超链接的 URL

    这个特定的示例涉及到一个简单的应用程序,当用户点击文本框中的超链接时,文本框的内容会更新为超链接的URL。Qt是一个强大的C++库,它提供了丰富的图形用户界面(GUI)功能,广泛应用于桌面和移动平台的应用程序...

    点击超链接弹出一个信息框

    标题“点击超链接弹出一个信息框”涉及的是网页交互中的常见功能,即通过超链接触发JavaScript事件,显示一个信息提示框。在这个场景下,我们通常会使用HTML结合JavaScript来实现这一功能。以下是对这个主题的详细...

    javascript 实现点击超链接变换图片

    在JavaScript中实现点击超链接变换图片是一项常见的网页交互功能,主要涉及到HTML、CSS以及JavaScript的基础知识。这个功能可以使用户点击一个超链接后,相应的图片会发生变化,为用户提供更丰富的交互体验。下面...

    WPS自动取消网址超链接方法.docx

    WPS办公软件由于其智能功能,经常会自动将输入的网址转换为超链接形式,这在一定程度上方便了用户的使用。但是,有时这种智能功能也会给用户带来一些不便,例如在某些情况下,我们不想让网址自动变成超链接,这时候...

    将内容中的符合url格式的字符串转换为超链接(JAVA版)

    在Java编程中,将文本内容中的符合URL格式的...通过学习和理解这个过程,你将能够更好地处理Java中的文本数据,将URL转换为可点击的超链接,提升用户体验。同时,这也是对Java正则表达式和字符串处理能力的一种锻炼。

    如何在richtextbox里实现网址的超链接,当点击该网址时就会打开网站

    ### 如何在RichTextBox里实现网址的超链接,当点击该网址时就会打开网站 在Windows Forms应用程序开发中,RichTextBox 控件是一个非常强大的文本编辑控件,它不仅支持多种格式的文本输入与显示,还提供了对超链接的...

    点击一个超链接弹出一个对话框

    在网页设计中,点击一个超链接弹出对话框是一种常见的交互方式,这通常涉及到JavaScript(JS)技术的应用。JavaScript是一种轻量级的解释型编程语言,广泛用于网页和网络应用,提供动态、交互性的用户体验。在本场景...

    js和CSS3鼠标悬停超链接展示图片特效

    本教程将介绍如何利用JavaScript和CSS3技术在鼠标悬停超链接时展示图片特效,为用户提供更为丰富的视觉体验。这款特效包含10种不同的动画效果,使得超链接在被鼠标指针悬停时更加生动有趣。 首先,我们讨论CSS3在...

    ABAP文章集合,点击超链接自动跳转

    ABAP文章集合,点击超链接自动跳转,欢迎同行一起交流

    关于润乾报表超链接调用js文件实现可交互

    本文将深入探讨如何利用润乾报表的超链接功能调用JavaScript(js)文件来实现更丰富的可交互性,让报表不仅仅是数据的静态展示,而是转变为一个能够与用户进行深度交互的平台。 首先,我们了解超链接在润乾报表中的...

    echarts 全国地图 点击地图上的点,打开超链接 地图点击事件

    在本文中,我们将深入探讨如何使用ECharts库创建一个全国地图,并实现点击地图上的特定区域后,触发页面跳转的功能。ECharts是一个基于JavaScript的数据可视化库,它提供了丰富的图表类型和交互功能,使得数据可视化...

    JavaScript点击超链接右边显示一个小图标(标记)案例

    在JavaScript编程中,实现点击超链接后在右侧显示一个小图标或标记的功能,是网页交互设计中常见的一种增强用户体验的方式。这种效果通常用于突出显示用户已选择的项目,或者表示某个操作的状态。以下将详细讲解如何...

    让网页上的超链接失效,不能点击的js代码

    让网页上的超链接失效,不能点击的JS代码 在网页开发中,超链接是非常常见的元素,我们经常需要在网页上添加超链接来指向其他网页或资源。但是,在某些情况下,我们可能需要让网页上的超链接失效,不能点击。例如,...

    点击listview实现超链接

    "点击listview实现超链接"这个主题涉及到如何在ListView的每个条目(ListViewItem)中嵌入超链接,使得用户点击后可以跳转到指定的网页或者执行特定的操作。这通常涉及到自定义Adapter和对TextView的处理,以实现...

    js超链接伸缩特效js超链接伸缩特效

    "js超链接伸缩特效"就是一种利用JavaScript实现的交互效果,主要用于增强网站的用户体验,特别是对于导航菜单或按钮等元素,使得用户点击时能有明显的视觉反馈。这种特效通过改变超链接的尺寸、颜色、透明度或其他...

    Android开发之部分字符串可实现超链接点击事件的方法源码

    本文将深入探讨如何在Android中实现部分字符串的超链接点击事件,并提供相关的源码解析。 首先,Android提供了TextView和WebView两种主要方式来处理字符串中的超链接。对于TextView,我们可以通过设置...

    很好用的js拷贝网页超链接

    如果想把自己网页中的超链接进行复制,然后转发给别人,只要您点点鼠标即可(^_^)! 注:如果你在本地运行,会报“SecurityError: Error #2060: 安全沙箱冲突:ExternalInterfac...”错误,放到你的web项目里则不会了...

    JS设置网页超链接的title!!

    JS设置网页超链接的title!! JS设置网页超链接的title!! JS设置网页超链接的title!! JS设置网页超链接的title!! JS设置网页超链接的title!! JS设置网页超链接的title!! JS设置网页超链接的title!!

Global site tag (gtag.js) - Google Analytics