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

  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属性来判断内容类型,就可以监听到类型去处理对应的逻辑;
相关推荐
weixin_177297220696 小时前
短剧小程序系统开发:技术驱动下的内容创新之路
小程序·语音交友
老华带你飞6 小时前
健身管理|基于java的健身管理系统小程序(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·健身管理系统小程序
2501_916008896 小时前
iOS混淆工具有哪些?在集成第三方 SDK 时的混淆策略与工具建议
android·ios·小程序·https·uni-app·iphone·webview
weixin_177297220696 小时前
盲盒抽卡机小程序系统开发:打造个性化娱乐新平台
小程序·娱乐
2501_915921436 小时前
Windows 如何上架 iOS 应用?签名上传全流程 + 工具推荐
android·ios·小程序·https·uni-app·iphone·webview
说私域9 小时前
企业通讯与营销技术融合创新:定制开发开源AI智能名片S2B2C商城小程序的协同价值研究
人工智能·小程序·开源
2501_9160074711 小时前
iOS 文件管理实战指南 查看 App 数据与系统日志的完整方法
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063212 小时前
iOS 内测上架流程详解:跨平台团队如何快速部署 TestFlight
android·ios·小程序·https·uni-app·iphone·webview
白白白鲤鱼13 小时前
Vue2项目—基于路由守卫实现钉钉小程序动态更新标题
服务器·前端·spring boot·后端·职场和发展·小程序·钉钉