比如吴京这个微博#我和我的父辈乘风剧组苦中作乐##吴京拍马… 来自吳京 - 微博,支持多个#标签,还可以支持多个外链

我们期望输入一段文本:

我们都是#中国人#,我们热爱#中国#,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


@tsingchan