js递归实现文本多url与多井号标签转换成链接
比如吴京这个微博#我和我的父辈乘风剧组苦中作乐##吴京拍马… 来自吳京 - 微博,支持多个#标签,还可以支持多个外链
我们期望输入一段文本:
我们都是#中国人#,我们热爱#中国#,http://www.9ong.com/ ,
我们喜欢各个#民族#的人民,我们喜欢分享:http://share.9ong.com/。
渲染效果:
html结构:
<span class="Contents fs-5">
<span>我们都是</span>
<a href="/public/search.html?pattern=%23%E4%B8%AD%E5%9B%BD%E4%BA%BA%23">#中国人#</a>
<span>,我们热爱</span>
<a href="/public/search.html?pattern=%23%E4%B8%AD%E5%9B%BD%23">#中国#</a>
<span>,</span>
<a href="http://www.9ong.com/" target="_blank">http://www.9ong.com/</a>
<i class="bi bi-box-arrow-up-right ms-1 text-secondary small"></i>
<span> ,我们喜欢各个</span>
<a href="/public/search.html?pattern=%23%E6%B0%91%E6%97%8F%23">#民族#</a>
<span>的人民,我们喜欢分享:</span>
<a href="http://share.9ong.com/" target="_blank">http://share.9ong.com/</a>
<i class="bi bi-box-arrow-up-right ms-1 text-secondary small"></i>
<span></span>
</span>
要将每个#标签#转换成我们系统的查询链接,将url转化成我们期望的安全带修饰的a标签:
//递归处理url与tag
//我们都是#中国人#,我们热爱#中国#,http://www.9ong.com/ ,我们喜欢各个#民族#的人民,我们喜欢分享:http://share.9ong.com/
export function contentsWithLinks(contents:string):mjElement[] {
let httpLink = contents.match(httpRegex);
if (!httpLink) {
return addLinkToTag(contents);
}else{
let head = contents.substring(0, httpLink.index);
let headM = addLinkToTag(head);
let tail = contents.substring(httpLink.index! + httpLink[0].length);
let tailM = contentsWithLinks(tail);
return [
...headM,
m('a').text(httpLink[0]).attr({href:encodeURI(httpLink[0]),target:'_blank'}),
m('i').addClass('bi bi-box-arrow-up-right ms-1 text-secondary small'),
...tailM,
];
}
}
//递归处理tag
function addLinkToTag(s: string): mjElement[] {
let tagLink = s.match(tagLinkRegex);
if (!tagLink) {
return [span(s)];
}else{
let head = s.substring(0, tagLink.index);
let tail = s.substring(tagLink.index! + tagLink[0].length);
let url = '/public/search.html?pattern='+encodeURIComponent(tagLink[0]);
let tailM = addLinkToTag(tail);
return [
span(head),
m('a').text(tagLink[0]).attr({href:url}),
...tailM
];
}
}
其中m()、span()、text()等方法可以参考mj.js 是一个受 Mithril.js 启发的基于 jQuery 实现的极简框架,对于曾经用过 jQuery 的人来说,学习成本接近零。详见 https://github.com/ahui2016/mj.js
记录,不成文章,用于有空时发pr给开源作者合并。
路径:public\ts\src\util.ts