当前位置: 首页 > 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.dtcms.com/a/317198.html

相关文章:

  • 移动商城平台适配:ZKmall开源商城鸿蒙 / 小程序端开发要点
  • 盲盒抽卡机小程序系统开发:打造个性化娱乐新平台
  • 用html写一个类似于postman可以发送请求
  • 8.6 JavaWeb(请求响应 P67-P74)
  • 生成模型实战 | GPT-2(Generative Pretrained Transformer 2)详解与实现
  • 医疗AI中GPU部署的“非对等全节点架构“方案分析(中)
  • 企业级MCP部署实战:从开发到生产的完整DevOps流程
  • 【C++】unordered系列容器使用及封装
  • 高温环境误检率↓76%!陌讯轻量化检测算法在短袖短裤识别的工业实践
  • Mac 洪泛攻击笔记总结补充
  • Vue2博客项目笔记(完结)
  • 面试问题11
  • 20-C语言:第21~22天笔记
  • V2X通信标准与消息数据结构详解
  • 异构系统数据集成之数据源管理:打通企业数据孤岛的关键一步
  • docker环境搭建
  • Qt Frameless Widget跨平台无边框窗口
  • 基于最大似然估计的卡尔曼滤波与自适应模糊PID控制的单片机实现
  • 鼠标下滑时回跳问题
  • 从“更优”到“更智”:V5.7.3 的交互革新、模式扩展与体验跃迁
  • NodeJs学习日志(1):windows安装使用node.js 安装express,suquelize,sqlite,nodemon
  • ESP32:2.搭建UDP服务器
  • 参考线程池构建一个高性能、配置驱动的Docker容器池
  • Linux---第二天---基础指令
  • copy_file_range系统调用及示例
  • 使用Nginx部署前后端分离项目
  • Docker的安装,服务器与客户端之间的通信
  • Linux基础命令的生产常用命令及其示例简单解释
  • 电子电气架构 ---如何焕新升级为 48V 电气架构
  • 【32】C++实战篇—— m行n列的坐标点,求每行相邻点X差值dX,每列相邻点y差值dY,并以矩阵形式左端对齐