uniapp 富文本标签的使用

需求:复制富文本标签里的内容,要求只复制纯文本

在这里插入图片描述
点复制文案时只复制页面展示出来的文本

		// 复制文案
		copy(info) {//info是富文本标签的内容
			info = this.getSimpleText(info)
			console.log(info)
		}
//转化的方法
getSimpleText(html) {
	var re0 = new RegExp("<br>", "g"); //匹配html标签的正则表达式,"g"是搜索匹配多个符合的内容
	var msg0 = html.replace(re0, '1');
	var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式,"g"是搜索匹配多个符合的内容
	var msg1 = msg0.replace(re1, ''); //执行替换成空字符		        
	var re2 = new RegExp("1", "g"); //匹配html标签的正则表达式,"g"是搜索匹配多个符合的内容
	var msg2 = msg1.replace(re2, '\r\n'); //执行替换成空字符
	return msg2;
			}
Uni-App提供了强大的RichText组件,可以帮助您在Uni-App开发中展示富文本内容。使用RichText组件,您可以轻松地展示带有HTML标签的文字、图片和链接等。如果您想要在Uni-App项目中展示富文本内容,可以按照以下步骤进行操作: 1. 首先,您需要创建一个新页面。可以使用Uni-App提供的页面创建命令或手动创建。 2. 在新页面的模板代码中,添加一个rich-text标签,并设置nodes属性为一个数组,数组中包含rich-text节点的配置信息。 3. 在rich-text节点的配置信息中,可以使用不同的节点类型来展示不同的内容,比如text节点用于展示文本,img节点用于展示图片,a节点用于展示链接。 4. 根据您的需求,配置节点的属性和子节点。比如可以设置text节点的text属性为需要展示的文本内容,设置img节点的src属性为图片的URL,设置a节点的href属性为链接的URL。 5. 可以通过添加样式来美化富文本内容。可以在新页面的样式代码中添加相应的样式规则,比如设置文本的颜色、字体大小,设置链接的颜色等。 6. 保存并运行您的Uni-App项目,然后导航到您创建的新页面,即可看到展示富文本内容的界面。 下面是一个完整的示例代码,展示了如何使用RichText组件实现富文本内容展示: ```html <template> <view> <rich-text :nodes="richTextNodes"></rich-text> </view> </template> <script> export default { data() { return { richTextNodes: [ { name: 'div', attrs: { class: 'rich-text-content', }, children: [ { type: 'text', text: '这是一段富文本内容,', }, { name: 'span', attrs: {}, children: [ { type: 'text', text: '带有加粗效果的文字', }, ], }, { type: 'text', text: ',以及', }, { name: 'a', attrs: { href: 'https://uniapp.dcloud.io/component/rich-text', target: '_blank', }, children: [ { type: 'text', text: '链接', }, ], }, { type: 'text', text: '。', }, { name: 'img', attrs: { src: 'https://example.com/image.png', }, }, ], }, ], }; }, }; </script> <style> .rich-text-content { margin: 10px; padding: 10px; background-color: #f5f5f5; color: #333; } .rich-text-content span { font-weight: bold; } .rich-text-content a { color: blue; } </style> ``` 通过以上步骤,您可以在Uni-App中实现富文本内容的展示。希望对您有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Uni-App使用RichText组件实现富文本内容展示教程](https://blog.csdn.net/qq_36901092/article/details/131141119)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值