当前位置: 首页 > news >正文

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

  1. 我的需求是给一段富文本的手机号和地址加样式并可拨打电话,导航地址;
  2. mp-html用的富文本插件是这个;
  3. 自己用正则把需要特殊标记的内容提取出来,如需要提取手机号,地址等,如下用标签<a href="#"  data-type="phone" data-content="电话" style="color: #0088cc; text-decoration: underline;">电话</a>显示;
  4.     //处理地址   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;
    <mp-html content="{{item.answer}}"bindlinktap="linktap"selectable="true"bindimgtap="imgtap" />
    <!-- bindlinktap可监听到a标签的点击事件 -->
    <!-- bindimgtap可监听到图片预览事件 -->

  5. 给mp-html添加bindlinktap="linktap",bindlinktap事件可以监听到a标签的点击,通过type属性来判断内容类型,就可以监听到类型去处理对应的逻辑;

http://www.lryc.cn/news/612328.html

相关文章:

  • 无人机遥控器舵量技术解析
  • cad c#二次开发 图层封装 获取当前层
  • 无人机遥控器波特率技术解析
  • 基于AI的自动驾驶汽车(AI-AV)网络安全威胁缓解框架
  • 开疆智能ModbusTCP转Profinet网关连接EPSON机器人配置案例
  • Docker国内可用镜像(2025.08.06测试)
  • 深入理解数据库连接池(Connection Pool):原理、优势与常见实现
  • wordpress网站的“管理员邮箱地址”有什么用?
  • Linux86 sheel流程控制前瞻4 判断vsftpd服务启动,如果启动,打印端口号,进程id
  • 系统运维之LiveCD详解
  • 【图像处理基石】浅谈3D城市生成中的数据融合技术
  • 【图像处理基石】什么是数字高程模型?如何使用数字高程模型?
  • dify之推送飞书群消息工作流
  • 飞书对接E签宝完整方案
  • 《动手学深度学习》读书笔记—9.7序列到序列学习
  • CPP网络编程-异步sever
  • 内部类详解:Java中的嵌套艺术
  • MATLAB深度学习之数据集-数据库构建方法详解
  • 202506 电子学会青少年等级考试机器人三级实际操作真题
  • KVazaar:开源H.265/HEVC编码器技术深度解析
  • 三、Istio流量治理(二)
  • 进程管理块(PCB):操作系统进程管理的核心数据结构
  • Linux systemd 服务管理与 Firewall 防火墙配置
  • envFrom 是一个 列表类型字段bug
  • LeetCode:1408.数组中的字符串匹配
  • 面向流程和产品的安全档案论证方法
  • PostgreSQL 高可用与负载均衡
  • DDoS 防护的未来趋势:AI 如何重塑安全行业?
  • MySQL各版本差异对比小工具
  • 贪心算法学习 跳跃游戏