【前端】从markdown格式文本中提取图片链接

简介: 【前端】从markdown格式文本中提取图片链接

分享一个前端工具函数,从markdown格式文本中提取图片链接,

回家上干货:

function markdownFindImageLinkFirst(markdown:string,defaultLink:string):string{
    const regex = /\!\[.*\]\(http.*\)/g;
    const matches = markdown.match(regex);
    if(matches == null) {
        return  defaultLink;
    }
    const firstMatch = matches[0];
// 使用replace方法,将不需要的部分替换为空字符串,得到纯净的图片链接
    const firstImageLink = firstMatch.replace(/\!\[.*\]|\(|\)/g, '');
    return firstImageLink
}


其实,可以看到只是写了两个正则表达式而已,但却能切实解决从markdown中提取第一张图片链接的问题,该功能将支持新闻列表页概览功能的开发。


有时候没必要使用多么复杂的技术,能解决实际需求就好。

目录
相关文章
|
2月前
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
231 5
|
30天前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
131 68
|
21天前
|
开发工具
用 Vim 编辑 Markdown 时直接粘贴图片
介绍一款 Vim 插件,可以帮助提升编辑 Markdown 时的从剪贴板粘贴图片的效率和体验。
30 2
|
1月前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
132 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
30天前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
31 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
1月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
33 4
|
1月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
19 1
|
1月前
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
42 3
|
1月前
|
JavaScript 前端开发 编译器
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
48 2