小程序 从后台获取的带有html标签的内容，使用正则表达式处理

最新推荐文章于 2021-06-03 09:34:57 发布
最新推荐文章于 2021-06-03 09:34:57 发布
阅读量505 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sunbeibei00000/article/details/109011166
本文介绍了一种简单的方法来修正HTML中图片的显示问题，通过正则表达式替换原有图片标签，添加特定的类名以实现更好的样式控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 r.data.info = r.data.info.replace(/\<img/gi, '<img class="detailImg" ')
java校验金额的正则表达式，深度好文
m0_57064830的博客
06-17 1286
开头 提起Spring，大家肯定不陌生，它是每一个Java开发者绕不过去的坎。Spring 框架为基于 java 的企业应用程序提供了一整套解决方案，方便开发人员在框架基础快速进行业务开发。 我最近一直在研究大厂的面试，发现现在的不论大大小小的互联网公司，Spring都是一个绕不开的话题，而且仅仅是 Spring 的面试，从最开始的官网入门到现在源码的深度分析。主要就是四个系列： MySQL基础开发篇 这部分的内容应该更合适那些刚入坑的朋友们或者是对于基础部分掌握不牢固的朋友，因此有一定经验的或者基础
【ECMAScript 从入门到进阶教程】第三部分：高级主题（高级函数与范式，元编程，正则表达式，性能优化）
10-05 1626
字面量语法: 直接在一对斜杠之间定义模式，其中可以包含可选的修饰符。例如/abc/i是一个匹配字符串中abc不区分大小写的正则表达式。构造函数语法: 使用RegExp构造函数来创建。这对于动态创建正则表达式特别有用。例如，等同于字面量语法中的/abc/i。// 字面量语法// 构造函数语法。
从后台传来的接口,小程序的转义
12-19
从后台传来的接口,小程序的转义,完美解决转义字符出现标签的问题
html打印当前页面的函数,小程序获取当前页面的值
weixin_39719476的博客
06-03 165
获取当前页面的参数/*** 页面的初始数据*/data: {level_one_data: [],level_two_data:[],product_list:[]}let level_two_data = that.data.level_two_data; // 获取当前对象的值for (var i = 0, len = level_two_data.length; i < len; i+...
微信小程序开发抽取HTML中数据的最快方法是正则表达式，而不是循环
qq_32534441的博客
04-17 1112
个人小程序当前具备了：各地实时多日天气预报查询、日历农历黄历万年历、密码记账本、理财计算器带历史数学计算器、出行路线查询等功能，扫描二维码体验： 就是当前集中功能太多速度很慢，回头还要有优化。。。 微信小程序系列文章列表： 一文读懂微信小程序开发工具、项目结构、全局配置文件及页面跳转 一文读懂微信小程序开发wxml、json、js、wxss四类核心文件 微信小程序开发抽取HTML种数据的最快方法...
小程序——js获取当前页面中的值
老简单题
01-15 1195
1.使用场景：一般用在显示列表中的多条信息，但是要点击某条信息进一步显示其详细信息 2.wxml中在属性中写上data-xxx=""（注意：需要与响应函数写在同个标签里，不然获取不到） <view data-id='{{item.id}}' bindtap='gotoDetail'> 3.js获取e.currentTarget.dataset.参数 //获取详细信息 gotoDetail:function(e){ console.log(e.currentTarget.d
微信小程序如何将后台返回的含有html或者markdown的内容转换成wxml
weixin_43714488的博客
03-14 815
最近做微信小程序项目遇到后台返回的数据中含有html标签，需要转换成wxml，有两种方法可以实现： 一、使用wxParse 可以参考这篇文章： https://blog.youkuaiyun.com/qq_37854055/article/details/80451638 wxParse官方地址：https://github.com/icindy/wxParse 但是遇到需要循环的时候就需要改造一下了...
后台传回的json数据含有html标签，无法在wxml正确显示，滚动到某个位置添加cl
03-29
五、处理HTML标签的问题：如果需要在wxml中显示带有HTML标签的内容，就必须使用wxparse这类的库来解析HTML内容，将其转换为wxml可以理解的标签，或者手动解析JSON数据，移除HTML标签后再进行显示。 在本例中，后台...
ASP.NET正则表达式应用
09-25
对于ASP.NET这样的Web应用程序框架来说，掌握正则表达式的使用尤为重要。本文将详细介绍一些常用的正则表达式及其在ASP.NET中的应用场景。 #### 二、数字类正则表达式 1. **匹配任何数字：** `^[0-9]*$` - 这个...
Java正则表达式与多线程安全：专家指南线程安全的Pattern实例使用
Java作为一种广泛使用的编程语言，其对于正则表达式和多线程的支持是构建复杂应用不可或缺的部分。在本章中，我们将对Java中的正则表达式和多线程进行初步的介绍和概述，为读者打下坚实的基础。 ## 1.1 Java正则...
在微信小程序中识别html标签的方法（wxParse）
01-28
在微信小程序中识别html标签的方法（wxParse） 微信小程序-利用wxParse将html转为wxml
小程序解析富文本（小程序解析后台返回的html代码）
05-17
小程序针对后台返回的html代码进行解析，实现编译出的文本内容，
微信小程序 抓取html中的内容,微信小程序中显示html格式内容的方法
weixin_39531229的博客
05-31 1342
前言最近项目上遇到在微信小程序里需要显示新闻内容，新闻内容是通过接口读取的服务器中的富文本内容，是html格式的，小程序默认是不支持html格式的内容显示的，那我们需要显示html内容的时候，就可以通过wxParse来实现。准备工作：首先我们下载wxParsewxParse下载完之后我们需要用到目录下的wxParse文件夹，把他拷贝到我们的项目目录下下面是具体的使用步骤1、在app.wxss全局样...
微信小程序中去除某一种html标签
csq087的博客
09-18 1125
res.data.result[i].name = res.data.result[i].name.replace(/<em>/g, '').replace(/<\/em>/g, '');
php 发短信验证码
科小洋的博客
11-06 364
以小程序的短信验证码为例 其他的发短信方式都是一样的 发验证码的只不过是 把生成的验证码随机数据 放进短信内容里面 数据库记录一下 进行对比 代码均以tp5框架为例 微信小程序 wxml <view class="regi-form-li clearfix"> <text class="fl label">手机号</text> <input class="fl input" disabled="{{smsFlag}}" name="mobile" bindinp
（二）支付宝小程序和微信小程序分别如何使用wxParse富文本解析html
liyiliang123的博客
05-09 1581
(一)微信小程序中wxParse 的使用 1. js文件中 2.wxml文件中 微信小程序wxParse下载地址 https://github.com/icindy/wxParse 或 https://github.com/liyiliang1995/wxParse （二）支付宝小程序中wxParse 的使用（注意支付宝使用的wxParse与...
使用正则表达式获取页面指定div或table中内容
weixin_30709929的博客
07-26 1642
本人第一次使用正则表达式，在网上查找了很多关于取table和div中内容的表达式，但一大部分都是无用的。本人整理了下方便其他新手参考使用 工具: RegexText 步骤：第一步：获取内容使用HttpWebRequest和HttpWebResponse #region 以GET方式获取远程页面内容 /********************************...
正则表达式
我只是个小学生 能力有限 一直抱着学习的态度
07-01 303
用法一: 限定开头 文档上给出了解释是匹配输入的开始，如果多行标示被设置成了true，同时会匹配后面紧跟的字符。 比如 /^A/会匹配"An e"中的A，但是不会匹配"ab A"中的A 用法二：（否）取反 当这个字符出现在一个字符集合模式的第一个字符时，他将会有不同的含义。 比如： /[^a-z\s]/会匹配"my 3 sisters"中的"3" 这里的”^”的意思是字符类的否定，上面...
【小程序】去除文本内容的html＜br＞等标签
北海_南风
05-16 1258
去除文本内容的html标签。 有时候调用接口时，有的接口内容会出现<br>这种标签等，显示内容的时候需要把标签去掉。 要处理的字符串str。 str.replace(/<[^>]+>/g,'') (/<[^>] +>/g,’’) “/<” 匹配 “<” 括号， “[^>]+”，匹配除了“>” 括号之外的所有内容，加号：一个或多个。 “>” ,匹配 “>” 括号。 “/g” ，全局匹配。 ‘’，把匹配到的字符串替换成‘’，
uniapp开发微信小程序使用ocr功能提取图片内的会员卡卡号
最新发布
07-19
<think>我们是在微信小程序环境中，使用uniapp框架开发，需要实现OCR功能来提取图片中的会员卡卡号。 微信小程序本身提供了OCR识别接口，但需要先确认接口是否支持会员卡卡号的识别。根据微信小程序文档，我们可以使用“通用印刷体识别”接口（ocr/comm）或“银行卡识别”接口（ocr/bankcard）。但是会员卡可能不是标准的银行卡，所以可能需要使用通用印刷体识别，然后从中提取卡号。 步骤： 1. 选择图片：使用uniapp的API（如uni.chooseImage）从相册或拍照获取图片。 2. 使用微信小程序的OCR接口：由于uniapp可以直接调用微信小程序的API，我们可以通过uni.request调用微信的OCR接口（需要将图片上传到微信的服务器）。 3. 解析结果：从OCR返回的结果中提取卡号信息（可能是数字串）。 注意： - 需要用户授权：scope.writePhotosAlbum（相册）和scope.camera（相机）以及可能需要的其他权限。 - 微信OCR接口需要在小程序管理后台开通，并且可能为付费接口（有免费额度）。 实现步骤详解： 1. 选择图片： 使用uni.chooseImage选择图片，得到临时文件路径。 2. 将图片上传到微信的OCR服务： 由于微信的OCR接口要求图片的服务器地址，而小程序中可以选择直接上传文件并识别，我们可以使用微信的wx.ocrBankcard（银行卡识别）或wx.ocrComm（通用印刷体识别）接口。但是注意，会员卡卡号可能包含数字，也可能包含字母，所以通用印刷体识别可能更合适。 但是，微信小程序文档中并没有直接提供会员卡识别的接口。因此，我们可以尝试使用通用印刷体识别（ocrComm），然后从识别的文本中提取卡号。 然而，微信小程序API中，OCR接口是通过云函数调用的，或者通过后端服务器调用？实际上，微信小程序提供了前端直接调用的OCR接口（需要用户授权），例如：wx.ocrIdCard（身份证）、wx.ocrBankCard（银行卡）等。但是会员卡没有专门的接口。 查看微信小程序文档：https://developers.weixin.qq.com/miniprogram/dev/api/ocr/comm.html 其中，通用印刷体识别接口（wx.ocrComm）可以识别图片中的文字，返回文字内容和位置。 3. 调用通用印刷体识别接口： 使用wx.ocrComm，需要传入图片路径（临时路径）。注意：该接口需要在小程序后台开通，并且需要用户授权（scope.ocrComm）。 4. 从识别结果中提取卡号： 由于会员卡卡号通常是一串连续的数字（也可能包含字母），我们可以通过正则表达式从识别出的文本行中匹配出卡号。但是，卡号的位置可能不固定，所以需要根据实际情况调整。 5. 处理结果：将提取的卡号显示给用户。 代码示例： 步骤1：选择图片 ```javascript uni.chooseImage({ count: 1, sourceType: ['album', 'camera'], success: (res) => { const tempFilePaths = res.tempFilePaths; this.ocrCardNumber(tempFilePaths[0]); } }); ``` 步骤2：调用通用印刷体识别 ```javascript methods: { ocrCardNumber(tempFilePath) { // 检查OCR接口可用性 if (wx.ocrComm) { wx.ocrComm({ imgUrl: tempFilePath, success: (res) => { // 识别成功，res.text包含所有识别出的文本，是一个字符串（可能包含换行） // 或者res.items是一个数组，包含每个识别出的文本块 console.log(res); // 提取卡号：假设卡号是一串连续的数字（例如8-20位），我们可以通过正则匹配 // 注意：识别结果可能是多行，所以合并成一个字符串处理 let allText = ''; if (res.items && res.items.length > 0) { allText = res.items.map(item => item.text).join('\n'); } else { allText = res.text; } // 使用正则表达式匹配卡号，这里假设卡号是8-20位的数字，实际根据会员卡规则调整 const cardNumberRegex = /\b\d{8,20}\b/; // 调整正则表达式以匹配你的会员卡格式 const match = allText.match(cardNumberRegex); if (match) { const cardNumber = match[0]; // 将卡号显示或存储 console.log('提取的卡号：', cardNumber); uni.showToast({ title: `卡号：${cardNumber}`, icon: 'none' }); } else { uni.showToast({ title: '未识别到卡号', icon: 'none' }); } }, fail: (err) => { console.error('OCR识别失败', err); uni.showToast({ title: '识别失败', icon: 'none' }); } }); } else { uni.showToast({ title: '当前版本不支持OCR', icon: 'none' }); } } } ``` 注意事项： - 由于微信小程序基础库版本要求，需要确保用户的基础库版本支持OCR接口（基础库2.7.0以上）。 - 需要在小程序后台开通OCR功能（可能需要在“设置”->“接口设置”中开通）。 - 需要用户授权：在调用ocrComm之前，需要先调用wx.authorize({scope: 'scope.ocrComm'})请求授权。 - 如果用户拒绝授权，需要引导用户手动打开设置页授权。 优化： - 如果会员卡卡号有固定位置（比如在卡片的特定区域），我们可以先进行图片裁剪，只识别卡号区域，提高准确率。 - 如果卡号格式特殊（比如包含字母和数字），则需要调整正则表达式。 另外，也可以考虑使用第三方OCR服务（如百度OCR、腾讯OCR等），但需要服务器支持，因为小程序不能直接请求第三方API（需要配置域名白名单），并且需要将图片上传到第三方服务器。如果使用第三方，则流程为：选择图片->上传到自己的服务器->服务器调用第三方OCR->返回结果。但这样会增加服务器成本。 综上所述，在微信小程序内使用自带的OCR接口是最便捷的。 相关问题： 1. 如何提高会员卡卡号识别的准确率？ 2. 微信小程序OCR接口的免费额度是多少？ 3. 如何处理用户拒绝授权OCR权限的情况？ 4. 如何适配不同会员卡样式的卡号提取？ 5. 在uniapp中如何调用微信小程序的OCR接口？ 6. 除了微信OCR，还有哪些OCR方案可以在uniapp微信小程序中使用？</think>在 Uniapp 开发微信小程序中实现 OCR 提取会员卡卡号，可以通过微信原生 OCR 接口或第三方 OCR 服务实现。以下是具体实现方案： ### 方案一：微信原生 OCR 接口（推荐） 微信小程序提供原生 OCR 能力，无需额外 SDK，识别速度快且免费额度充足（1000次/天）[^1]。 #### 实现步骤： 1. **开通 OCR 权限** 在小程序后台【开发】→【开发管理】→【接口设置】中开通 `ocrComm` 接口权限。 2. **选择图片** ```javascript uni.chooseImage({ count: 1, success: (res) => { const tempFilePath = res.tempFilePaths[0]; this.recognizeCard(tempFilePath); } }); ``` 3. **调用 OCR 接口** ```javascript // 使用微信原生OCR接口 recognizeCard(filePath) { wx.ocrComm({ imgUrl: filePath, success: (res) => { const textItems = res.items; // 识别结果数组 const cardNum = this.extractCardNumber(textItems); console.log("提取卡号:", cardNum); }, fail: (err) => { console.error("OCR识别失败:", err); } }); } ``` 4. **卡号提取逻辑** ```javascript extractCardNumber(items) { // 匹配8-20位连续数字（根据实际卡号规则调整） const cardRegex = /\b\d{8,20}\b/; for (let item of items) { const match = item.text.match(cardRegex); if (match) return match[0]; } return "未找到卡号"; } ``` #### 注意事项： - 需添加用户授权：`<button open-type="openSetting">授权OCR功能</button>` - 基础库要求：微信客户端 7.0.12+ - 图片限制：小于 2MB，支持 JPG/PNG --- ### 方案二：第三方 OCR 服务（如百度 AI） 若需更高精度或特殊格式识别，可使用第三方服务： ```javascript // 以百度OCR为例（需配置安全域名） async recognizeByBaidu(filePath) { const token = await this.getBaiduToken(); // 获取access_token const base64 = await this.fileToBase64(filePath); uni.request({ url: `https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic?access_token=${token}`, method: 'POST', header: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: { image: base64 }, success: (res) => { const words = res.data.words_result.map(item => item.words); console.log("识别结果:", words); } }); } // 图片转Base64 fileToBase64(filePath) { return new Promise((resolve) => { wx.getFileSystemManager().readFile({ filePath, encoding: 'base64', success: (res) => resolve(res.data) }); }); } ``` --- ### 优化建议 1. **图片预处理** ```javascript // 裁剪卡号区域（使用uni.canvas） const ctx = uni.createCanvasContext('cardCanvas'); ctx.drawImage(filePath, cropX, cropY, width, height, 0, 0, 200, 80); ctx.draw(() => { uni.canvasToTempFilePath({ canvasId: 'cardCanvas' }); }); ``` 2. **多引擎降级策略** ```javascript try { await wx.ocrComm(...); } catch (e) { await this.recognizeByBaidu(...); // 原生失败时降级 } ``` 3. **本地正则增强** 根据会员卡特征优化正则表达式： ```javascript // 示例：带分隔符的卡号 (1234-5678-9012) const regex = /(\d{4}[-\s]?){3}\d{4}/; ``` --- ### 常见问题解决 1. **权限拒绝处理**： ```javascript wx.openSetting({}) // 引导用户开启权限 ``` 2. **模糊图片优化**： 使用 `uni.compressImage` 进行锐化处理： ```javascript uni.compressImage({ src: filePath, quality: 80, success: (res) => { this.recognizeCard(res.tempFilePath); } }); ``` 3. **多卡号识别**： 增加位置过滤逻辑： ```javascript // 根据文本位置Y坐标排序（卡号通常在卡片中部） const centerItems = items.filter(item => item.pos.y > 100 && item.pos.y < 300); ``` --- > 建议优先使用微信原生 OCR 方案，识别速度更快（约 200ms）且无网络延迟。实际测试中，印刷体数字识别准确率可达 98%+[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

罗倩楠_666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值