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

  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属性来判断内容类型,就可以监听到类型去处理对应的逻辑;
相关推荐
苹果电脑的鑫鑫13 分钟前
微信开发者工具中模拟调试现场扫描小程序二维码功能
小程序
阿彬学java11 小时前
Charles抓包微信小程序请求响应数据
微信小程序·小程序
傻傻有内涵的我11 小时前
【微信小程序】分别解决H5的跨域代理问题 和小程序正常不需要代理问题
微信小程序·小程序
必然秃头11 小时前
微信小程序SSE替代方案实战
微信小程序·小程序
毕设源码-钟学长1 天前
【开题答辩全过程】以 微信小程序的医院挂号预约系统为例,包含答辩的问题和答案
微信小程序·小程序
bmy-happy1 天前
实验2 天气预报
微信小程序·小程序
兰亭妙微2 天前
从线到机:AI 与多模态交互如何重塑 B 端与 App 界面设计
人工智能·小程序·交互·用户体验设计公司
青青子衿越2 天前
微信小程序web-view嵌套H5,小程序与H5通信
前端·微信小程序·小程序
!win !2 天前
uni-app支付宝端彻底禁掉下拉刷新效果
前端·小程序·uni-app
软希网分享源码2 天前
校园跑腿小程序源码 | 跑腿便利店小程序(源码下载)
小程序·跑腿便利店小程序·校园跑腿小程序源码