js获取字符串中超链接,并加样式跳转页面

news2024/11/17 13:27:47

效果图
在这里插入图片描述

主要代码:js

this.$nextTick(() => {
	// 给循环出来的div标签加个id为
	let container = document.getElementById("linkTo");
	container.innerHTML = container.textContent.replace(/(https?:\/\/[^\s]+)/g, function (match) {
    	var link = document.createElement("a");
    	link.href = match;
    	link.style.color = "blue"; // 设置链接颜色为蓝色
    	link.target = "_blank";  // 在新窗口打开链接
    	link.style.textDecoration = "underline";  // 下划线
    	link.textContent = match;
    	link.onclick = function () {
     		return false; // 阻止链接默认行为
    	};
   		return link.outerHTML;
	});
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1868043.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

代码随想录算法训练营:14/60

非科班学习算法day14 | LeetCode266:翻转二叉树 ,Leetcode101: 对称二叉树,Leetcode100:相同的的树 ,LeetCode572:另一颗树的子树,LeetCode104:二叉树的最大深度,LeetCode559:N叉树的最大深度 目…

将产品制作成3D模型在网站上展示需要多少费用?

将产品制作成3D模型并在网站上展示的费用会因多种因素而异,包括模型的复杂度、所需的细节程度、制作3D模型的软件和工具、以及是否需要专业设计师的服务等。此外,不同的3D模型制作服务提供商可能会有不同的定价标准。 如果能自己制作3D模型,…

精益生产推进时如何营造持续变革的氛围?

在快速变化的市场环境中,企业如何保持竞争力?精益生产无疑为众多企业提供了一个强大的战略工具。但是,单纯的引入精益生产理念和方法并不能保证企业的持续成功。关键在于如何营造一种持续变革的氛围,让精益生产成为推动企业不断前…

职升网:咨询工程师可以的工作都有啥?

(1)经济社会发展规划、计划咨询; (2)行业发展规划和产业政策咨询; (3)经济建设专题咨询; (4)投资机会研究; (5)工程项目建议书的编制; (6)工程项目可行性研究报告的编制; (7)工程项目评估; (8)工程项目融资咨询,绩效追综评价,后评价及培训咨询服务…

零信任价值获全面认可 新场景下展现无穷潜力

2023年,零信任在全球范围内持续快速发展,已经从新的安全理念发展成为云时代的主流安全架构,进入了全面普及期。 2023年,中国零信任市场同样涨势迅猛,产业生态越来越成熟,应用范围越来越广,应用…

【数据库】oracle安装步骤(详细)

目录 1.下载oracle安装包 2.解压文件后,找到可执行安装文件【 setup.exe 】双击安装。如图: 3.安装第一步:配置安全更新,这步可将自己的电子邮件地址填写进去(也可以不填写,只是收到一些没什么用的邮件而…

高中数学:不等式-常用不等式知识点汇总

一、基本性质 比较大小的常用两种方法:作差法,作商法 等式性质 不等式性质 二、基本(均值)不等式 扩展 三、二次函数与一元二次方程不等式 定义 解的对应关系 一元二次不等式的求解过程 四、二元一次不等式(组)与线性规划 关键在于求多个不等…

第2章.现场设备的物联网模式--设备网关

第2章.现场设备的物联网模式 本章列出了与现场设备或事物相关的关键模式。阅读本章后,您将能够识别物联网架构中这些模式的存在。它提供了有关模式适合或适用的场景的详细信息,以及需要考虑的约束。这将帮助您相对轻松地理解现有的物联网架构。 本章涵盖…

Linux系统查询磁盘空间大小(df、du)

df命令是linux系统以磁盘分区为单位查看文件系统,可以加上参数查看磁盘剩余空间信息, 命令格式:df -hl 显示格式为: Filesystem(文件系统) Size(容量) Used(已用) Avail(可用) Use%(已用%) Mounted on(挂载点) 命令使用详细介绍 …

探索未来驾驶新纪元:加油App开发,您的智能出行助手

一、前言 随着科技的快速发展和人们生活节奏的加快,传统加油方式已逐渐无法满足现代驾驶者的需求。为了满足广大驾驶者的便捷、高效、智能的加油体验,我们倾力打造了一款全新的加油App,让您的出行更加轻松、愉快。 二、产品特色 智能导航&…

基于FreeRTOS+STM32CubeMX+LCD1602+MCP3308(SPI接口)的8通道ADC转换器Proteus仿真

一、仿真原理图: 二、仿真效果: 三、STM32CubeMX配置: 1)、时钟配置: 2)、USART配置: 四、软件部分: 1)、主功能函数: 2)、初始化部分: /* USER CODE BEGIN Header */ /** ******************************************************************************

ZYNQ学习教程?ZYNQ-FPGA实战教程!

学习 ZYNQ 比FPGA、MCU、ARM 等传统工具开发要求更高,想学好 ZYNQ 也不是一蹴而就的事情。 学习 ZYNQ 要具备的技能: 1、 软件开发人员  计算机组成原理、 C、C语言、 计算机操作系统、tcl 脚本、良好的英语基础 2、 逻辑开发人员 计算机组成原理…

台球厅助教软件开发台球陪练系统源码助教陪练行业市场分析

市场分析 随着台球运动的普及和竞技水平的不断提升,台球助教市场也逐渐成为了一个备受关注的领域。然而,如何高效、规范地管理这一市场,确保助教质量,提升用户体验,成为了摆在我们面前的一大挑战。幸运的是&#xff0…

NewspaceGPT带你玩系列之美人鱼图表

这里写目录标题 注册一个账号,用qq邮箱,然后登录选一个可用的Plus,不要选3.5探索GPT今天的主角是开始寻梦美人鱼图表我选第一个试一下问:重新回答上面的问题,一切都用汉语重新生成一个流程图:生成一个网站登…

2024年03月Python六级真题+答案(中国电子学会 )

青少年软件编程(Python)等级考试试卷(六级) 分数:100 题数:38 一、单选题(共25题,共50分) 1.以下选项中,创建类正确的是?( ) A. class test1…

VUE大屏的开发过程(纯前端)

写在前面,博主是个在北京打拼的码农,工作多年做过各类项目,最近心血来潮在这儿写点东西,欢迎大家多多指教。 对于文章中出现的任何错误请大家批评指出,一定及时修改。有任何想要讨论和学习的问题可联系我:1…

AI-人工智能指数报告(四):科学、医学与教育

背景: 从2017年开始,斯坦福大学人工智能研究所(HAI)每年都会发布一份人工智能的研究报告,人工智能指数报告(AII),对上一年人工智能相关的数据进行跟踪、整理、提炼并进行可视化。这份…

轨迹跟踪PID相关及前馈引入结果对比

1、前言: 记录下给定一段轨迹如何实现跟踪控制,主要使用几个经典的方法进行对比。一些讨论的部分在代码中的注释部分。 前馈控制可以在没有扰动和建模误差的理想条件下很好地跟踪期望输出,但在实际系统中,由于存在建模误差、外部扰…

解决微信小程序使用textarea输入框 type=“textarea“ 文本输入限制问题

出现的问题 type"textarea" 这个限制 微信小程序使用textarea , 输入字数大于140 时就输入不进去了 加入这个就解决了 maxlength"-1" <u-inputv-model"queryParams.orderIdTxt"border"true":focus"true":auto-height&q…