关于小程序中富文本标签不识别空格符&nbsp；的问题

最新推荐文章于 2024-05-11 16:30:15 发布
最新推荐文章于 2024-05-11 16:30:15 发布
阅读量1.1k 收藏 1
点赞数 2
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71102922/article/details/130281493
版权

如果后端返回给我们的数据含有 

例：

<p>尊敬的客户：</p>↵<p>&nbsp; &nbsp; &nbsp; &nbsp;商城新开张，快来砸单哦！</p>

但是在小程序里面我们使用rich-text标签富文本，&nbsp; 这个字符是不能被小程序识别的，所以不会显示出空格

我们需要 res.data.content.replace(/&nbsp;/g,'\xa0')

这个'\xa0'，字符可以将 转换成一个空白字符，这样就实现了我们想要的效果，献丑了！！！

不霍
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
小程序引入富文本解析不出来_引入富客户端应用程序
cuxiong8996的博客
07-02 655
本“ 插件开发101 ”系列文章都是关于开发插件的。 但是在开始之前，我们需要确保我们有一个适当的环境来开发插件。 第一步是从Eclipse.org下载包含插件开发环境（PDE）的Eclipse发行版。 我建议下载最新版本的Eclipse Classic。 在本系列中，我们将使用Eclipse V3.4（M5）的里程碑版本。 完成此操作后，您就可以开始了。 （请参阅相关主题 ，了解在哪里可以找...
微信小程序使用rich-text渲染后台保存的富文本数据时不能渲染出空格、首行缩进的解决
m0_68964998的博客
08-09 715
给rich-text标签加上 style="white-space:pre-wrap;PC端使用quill-editor 富文本编辑器不能回显空格同理。
uniapp 微信小程序 u-parse 富文本解析插件解析不了多个空格,多个空格会被模版解析成单个空格问题解决
最新发布
qq_56538005的博客
05-11 314
【代码】uniapp 微信小程序 u-parse 富文本解析插件解析不了多个空格,多个空格会被模版解析成单个空格问题解决。
小程序 rich-text 富文本解析不识别空格
zhazhawei9527的博客
03-27 1088
小程序 rich-text 富文本解析不识别空格
小程序使用wxparse解析富文本出现span标签不识别
可口可乐哟的博客
10-19 1475
小程序使用wxparse解析富文本出现span标签不识别 之前一直使用wxparse来解析富文本，解析富文本的时候出现了span标签没有解析，由于wxparse项目已经不维护了，所以我选择了其他的富文本插件。 插件地址： 新富文本插件 插件文档： 文档 引用下作者的readme 在原生框架中使用 源码引入 复制 parser 文件夹至 components 目录 在需要使用页面的 json 文件中添加 { "usingComponents": { "parser":"/components/
小程序之富文本解析遇坑
weixin_44317275的博客
09-09 995
当小程序遇到富文本时，是不能直接解析的。想要解析富文本必须用插件工具。我以我跳坑的经验，给大家讲述下如何在小程序中实现富文本解析。 首先要在根目录引入wxParse插件 其次要在需要用到的js中引入wxParse.js,然后按照wxparse.js的规则去把对应的数据填充。 * 1.bindName绑定的数据名(必填) * 2.type可以为html或者md(必填) * 3.data为传入的具...
微信小程序中富文本解决方法
03-12
微信小程序中不能直接将获取的富文本信息放到页面上展示，此文件即可解决此问题
小程序中富文本解决方案
03-29
微信小程序提供的&nbsp;rich-text&nbsp;在实际工作上根本不能满足我们的需求。 正好项目中需要用到这个，就自己查下资料，网上说&nbsp;wxParse&nbsp;这个插件可以使用。 好的！就决定使用这个了，但是实际情况并没有想象中那么简单。...
支付宝小程序中富文本解决方法
03-12
开发支付宝小程序中，富文本的内容不能直接被使用，此文件即解决了富文本不能用的问题
微信小程序整合使用富文本编辑器的方法详解
01-19
本文实例讲述了微信小程序整合使用富文本编辑器的方法。分享给大家供大家参考，具体如下： 使用WxParse插件实现小程序的富文本显示 ，下载地址：富文本插件WxParse 具体使用步骤： 1. 复制插件文件夹到项目根目录，...
微信小程序实现富文本图片宽度自适应的方法
10-17
总之，要实现微信小程序中富文本图片的宽度自适应，关键在于清除原有图片样式，设置合适的CSS属性，以及可能的样式调整。通过这样的处理，可以确保图片在不同尺寸的屏幕上都能正常显示，提供良好的用户体验。
微信小程序rich-text 文本首行缩进和图片居中和富文本rich-text 解析多个空格不成功 &nbsp
coldriversnow的专栏
11-16 1471
使用rich-text组件渲染html格式的代码，常常因为不能自定义css导致文本不能缩进，以及图片不能居中等问题，这里可以考虑使用js的replace方法，替换字符串，然后在渲染的同时加载行内样式。
关于小程序中富文本标签识别空格符&nbsp；的问题
vscode_js的博客
04-27 4033
今天解决了一个显示的问题，在后台富文本输入框设置了这样的一个格式的文本：如下图所示： 在前端页面调用接口后，数据给我们返回得是如下所示： content:"<p style="white-space: normal;">主办单位：平安银行杭州支行</p><p style="white-space: normal;">时&nbsp; &nbsp; &nbsp; &nbsp;间：11月24日 14:00-17:00</p>
tinymce富文本深坑：只输入空格时无法输出内容
m0_63273538的博客
04-28 508
tinymce富文本深坑：只输入空格时无法输出内容
微信小程序中 text组件里不能使用空格回车的解决办法
渔父歌的博客
08-27 1933
将 text 组件的 decode 属性设置为 true 就可以在 text 组建里使用 html编码后的字符和转义字符了，如： &lt;text decode='true'&gt;&amp;nbsp;\n&lt;/text&gt; 这里面 &amp;nbsp 和 \n 表示一个空格和回车。...
uniapp编译微信小程序富文本rich-text的图片样式不生效原因
cb1101的博客
10-26 1302
修改思路：先把rich-text中的style属性替换掉，然后再替换想要的样式，也就是通过两次replace实现，代码如下。详细查看代码，是因为在后台增加文章的时候，富文本编辑器自动给图片设置了宽度，导致在小程序中的替换虽然成功了，但是不生效。开始采用这个replace方法，编译后h5中生效，微信小程序中不生效。好了，预览小程序，生效了，仅供参考。
php后台富文本编辑器的内容调用到前端小程序页面的一些显示问题，如：&nbsp；
怎奈你何的博客
12-12 827
后台富文本编辑器的空格&nbsp;在小程序端直接以符号显示出来，没有空格的效果如下： 方法1（在小程序端解决）：将这些&nbsp;转换成空格。代码如下： //一个转换文本中多个字符串的方法 String.prototype.myReplace=function(f,e){//吧f替换成e var reg=new RegExp(f,"g"); //创建正则RegExp对象 return this.replace
CSDN的富文本编辑状态空格为&nbsp
z062703060408y的博客
05-17 423
今天第一天写博客，为了验证缩写内容是否正确 把sql语句复制了放在leetcode上执行代码 上图红框内与篮框内应该是一样的，但是蓝框内却总是找不到别名p 震惊！！！ 解决方案： 将两段sql语句复制到IDE中，如ideal 发现在给Person表赋别名p时，出现NBSP,这里应该是html中空格的转义字符&nbsp，离谱！！！不过好歹是解决了 总结：不要复制博客里的空格 进一步发现，除了代码段中输入空格，博客其他位置（目前只看了正文和块状引用）输入的空格均被转义 ps:m
quillEditor富文本编辑器空格跳过验证问题
weixin_45776545的博客
06-27 175
【代码】quillEditor编辑器空格跳过验证问题。
uniapp空格怎么表示
07-25
在uni-app中，可以使用`&nbsp;`来表示空格。在Vue的web端和uni-app的小程序端都可以使用这种方式来表示空格。在代码中，可以将空格替换为`&nbsp;`来实现空格的显示。例如，可以使用以下代码来表示空格： ```html <template> <span class="kala_text" v-html="text"></span> </template> <script> export default { data() { return { text: '具体文案见数据说明' } }, computed: { newText() { return this.text.replace(new RegExp(' ', 'gm'), '&nbsp;') } } } </script> <style scoped> .kala_text { white-space: pre-wrap; word-break: break-word; } </style> ``` 在上述代码中，通过使用`v-html`指令将`text`中的内容渲染为HTML，并使用`computed`属性`newText`将空格替换为`&nbsp;`。同时，使用`white-space: pre-wrap`样式属性可以保证文本原样输出，而`word-break: break-word`样式属性可以避免文字超出限制。这样就可以实现在uni-app中正确显示空格了。 #### 引用[.reference_title] - *1* *3* [【vue、uni-app】文本信息的完全显示（回车换行、连续空格、数字&英文换行）](https://blog.csdn.net/Loobub_Kala/article/details/121693687)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp学习](https://blog.csdn.net/qq_52769681/article/details/121228405)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值