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

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

主要代码: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.mzph.cn/pingmian/35903.shtml

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

相关文章

【微前端-Single-SPA、qiankun的基本原理和使用】

背景 在实际项目中,随着日常跌倒导致的必然墒增,项目会越来越冗余不好维护,而且有时候一个项目会使用的其他团队的功能,这种跨团队不好维护和管理等等问题,所以基于解决这些问题,出现了微前端的解决方案。…

蚁群算法求解TSP问题

一、基本原理 一只蚂蚁从一个城市出发,在访问其他城市时留下信息素踪迹。其他蚂蚁沿着这些踪迹并开辟自己的路径。信息素在访问频率较高的路径上积累得更密集,这种密度增加了其他蚂蚁选择该路径的可能性。 import randomdistances [[0, 2, 5, 7],[2, 0…

权限字符串的结构

权限字符串在Unix和Linux文件系统中用于表示文件和目录的访问权限,通常由ls -l命令生成的输出中看到,权限字符串由10个字符组成 ,其结构如下: 文件类型字符 用户权限 组权限 其他用户权限 [1] [2-4] [5-7] [8-10]1. 文件类型字符 -:普通文件 (R…

FFmpeg 系列

📚 此篇文章是先引入ffmpeg的概念以及主要的功能,后面会根据每一个特点进行详解,喜欢ffmpeg的可以持续关注。 ffmpeg是什么? FFmpeg 是一个开源的跨平台音视频处理工具,它可以用来录制、转换以及流化音视频内容。具体…

Trex测试仪使用

公司测试仪器紧张,打算安装Trex做简单的测试。如下下载最新的trex工程。 rztrex:~$ sudo mkdir /opt/trex rztrex:~$ cd /opt/trex/ rztrex:/opt/trex$ rztrex:/opt/trex$ sudo wget --no-cache https://trex-tgn.cisco.com/trex/release/latest --no-check-certif…

antd内容超过固定长度就显示...,鼠标移入则显示提示

结合antd的Tooltip组件,如果内容超过固定长度就显示…,鼠标移入则显示提示 /*** 结合antd的Tooltip组件,如果内容超过固定长度就显示...,鼠标移入则显示提示* param param0* returns*/ const EllipsisText ({ text }) > {con…

前端项目vue3/React使用pako库解压缩后端返回gzip数据

pako仓库地址:https://github.com/nodeca/pako 文档地址:pako 2.1.0 API documentation 外部接口返回一个直播消息或者图片数据是经过zip压缩的,前端需要把这个数据解压缩之后才可以使用,这样可以大大降低网络数据传输的内容&…

解决qiankun项目与子应用样式混乱问题

背景 qiankun项目用的是Vue2Antdesign2,但其中一个子应用用的是Vue3Antdesign4。集成之后发现子应用的样式混乱,渲染的是Antdesign2的样式。 解决 以下步骤在子应用里操作 1. 在main.js引入ConfigProvider ,在app全局注册ConfigProvider …

【异常错误】归一化导致的图像生成颜色偏差

由于归一化的问题,会导致生成的图像颜色偏差严重,例如会导致生成的颜色偏红黑色、淡色、青色.. 如果你生成的图像整体感官上没有问题,但是却在颜色上有很大偏差,那么很大可能就是你训练的时候归一化的程序不对 ImageFolder的实现…

Depth Anything V1,V2论文解读

Depth Anything 引言Depth Anything V1标注方法学习标注图像发挥未标注图像的潜力语义辅助感知 Depth Anything V2总体框架流程 引言 在深度估计领域,单目深度估计(Monocular Depth Estimation,MDE)是指利用单个摄像头拍摄的图像…

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(十八)

课程地址: 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程,一套精通鸿蒙应用开发 (本篇笔记对应课程第 28 节) P28《27.网络连接-Http请求数据》 案例: 这里不懂后端假设服务器的前端小伙伴就需要课程源码资料了…

深度之眼(二十五)——研究生学习计划安排

文章目录 一、前言二、结构安排和规划2.1 夯实基础2.2 分方向训练(待)2.3 进阶训练 三、其他 一、前言 课题组这边是需要对机器视觉有所要求吧,也就是CV方向。这一届研三师兄也都是在大厂拿到30W的年薪了,也是需要拥抱深度学习这…

java收徒 java辅导 java试用期辅导 java零基础学习

💗博主介绍:✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者,博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗 🌟文末报名辅导🌟 感兴趣的可以先收藏起来,还有大家…

守护变电箱消防安全,全氟己酮自动灭火片该安装在哪个位置?

变电箱、配电柜、换电柜是电力设备的重要组成部分,安全性至关重要。但在使用过程中,容易受到电气、机械、环境等因素影响,出现接触不良、短路、漏电等安全隐患,从而引发火灾事故。为了及时防范火灾风险,提前安装一款能…

【LeetCode】每日一题:数组中的第K大的元素

给定整数数组 nums 和整数 k,请返回数组中第 k 个最大的元素。 请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。 解题思路 第一种是快排,快…

Vue中数组的【响应式】操作

在 Vue.js 中,当你修改数组时,Vue 不能检测到以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] newValue当你修改数组的长度时,例如:vm.items.length newLength 为…

网卡基础命令

使用 nmcli 可以执行各种网络管理任务,包括重新加载连接配置、重启网卡以及关闭和启用网卡。以下是一些常见的基础命令及其用途: 重新加载连接配置 sudo nmcli connection reload 重新加载所有网络连接的配置文件。 重启网卡(网络设备&#x…

Java基础(二)——数组,方法,方法重载

个人简介 👀个人主页: 前端杂货铺 ⚡开源项目: rich-vue3 (基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL) 🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展 &#x1…

01_02_Mybatis的配置文件与基于XML的使用

1、引入日志 在这里我们引入SLF4J的日志门面&#xff0c;使用logback的具体日志实现&#xff1b;引入相关依赖&#xff1a; <!--日志的依赖--><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-api</artifactId><version&g…

从命令行管理文件——软连接,软硬连接的区别

软连接 1. 原理 软连接本质是一种符号连接&#xff0c;类似于 Windows 的快捷方式&#xff0c;存储对应文件的路劲 2. 格式 ln -s 源文件 软连接名称 例&#xff1a; [rootserver /] # cd ~ [rootserver ~] # echo "china" > h1.txt [rootserver ~] # ln…