小程序中,给一段富文本字符串文案特殊内容加样式监听点击事件

  1. 我的需求是给一段富文本的手机号和地址加样式并可拨打电话,导航地址;
  2. mp-html用的富文本插件是这个;
  3. 自己用正则把需要特殊标记的内容提取出来,如需要提取手机号,地址等,如下用标签<a href="#" data-type="phone" data-content="电话" style="color: #0088cc; text-decoration: underline;">电话</a>显示;
javascript 复制代码
    //处理地址   
    let processedStr = str.replace(/位于([^。;,,]+?)(?=[。;,,]|$)/g,
      (match, address) => {
        return `位于<a href="#" data-type="address" data-address="${address}" style="color: #0088cc; text-decoration: underline;">${address}</a>`;
      }
    );


    // 处理电话号码
    processedStr = processedStr.replace(phoneReg, (match) => {
      // 保持原始显示格式,但去除横线用于拨号  这里用a标签代替拨打手机号
      const purePhone = match.replace(/-/g, '');
      return `<a href="#" data-type="phone" data-phone="${purePhone}" style="color: #0088cc; text-decoration: underline;">${match}</a>`;
    });

    return processedStr;
html 复制代码
<mp-html content="{{item.answer}}"
         bindlinktap="linktap"
         selectable="true"
         bindimgtap="imgtap" />
<!-- bindlinktap可监听到a标签的点击事件 -->
<!-- bindimgtap可监听到图片预览事件 -->
  1. 给mp-html添加bindlinktap="linktap",bindlinktap事件可以监听到a标签的点击,通过type属性来判断内容类型,就可以监听到类型去处理对应的逻辑;
相关推荐
2501_915909063 小时前
网络调试工具推荐 Fiddler抓包工具使用教程与代理设置详解(HTTP/HTTPS配置与实战技巧)
网络·http·ios·小程序·fiddler·uni-app·webview
老师可可5 小时前
成绩发布工具使用方法,附成绩分析教程
学习·信息可视化·小程序·excel·学习方法
sen_shan7 小时前
《微信小程序》第八章:“我的“设计
微信小程序·小程序
weixin_1772972206911 小时前
盲盒小程序系统开发:助力品牌拓展新市场
小程序·盲盒
一 乐11 小时前
口腔健康系统|口腔医疗|基于java和小程序的口腔健康系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·小程序·毕设
Aress"11 小时前
uniapp 生成二维码图片[APP+H5+小程序等 全端适配]
小程序·uni-app
小小王app小程序开发11 小时前
旧衣回收小程序的技术架构与商业落地:开发者视角的全链路解析
小程序·架构
sen_shan13 小时前
《微信小程序》第七章:TabBar设计
微信小程序·小程序
程序00713 小时前
微信小程序app.js错误:require is not defined
javascript·微信小程序·小程序
云起SAAS13 小时前
斗兽棋象狮虎豹狼小游戏抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·斗兽棋象狮虎豹狼小游戏