vue如何过滤html标签,去除富文本中的html标签及vue、react、微信小顺序中的过滤器...

在猎取富文本后,又只需显现部分内容,须要去除富文本标签,然后再截取个中一部分内容;然后就是过滤器,在微信小顺序中运用照样挺屡次的,在vue及react中也遇到过

1.富文本去除html标签去除html标签及 空格let richText = '

       sdaflsjf的雄厚及饿哦塞尔

dsfjlie';

/* 去除富文本中的html标签 */

/* *、+限定符都是贪欲的,由于它们会尽能够多的婚配笔墨,只要在它们的背面加上一个?就能够完成非贪欲或最小婚配。*/

let content = richText.replace(/<.>/g, '');

console.log(content);

/* 去除  */

content = content.replace(/ /ig, '');

console.log(content);

/* 去除空格 */

content = content.replace(/\s/ig, '');

console.log(content);截取字符串content = formatRichText(content);

console.log(content);

/* 运用substring来截取字符串 */

if (content.length > 10) {

content = content.substring(0, 10) + '...';

}

console.log(content);

/* 限定字数后增加省略号 */

function formatRichText(richText) {

let temporaryText = '';

/* 设置多长后增加省略号 */

const len = 142;

if (richText.length * 2 <= len) {

return richText;

}

/* 用于纪录笔墨内容的总长度 */

let strLength = 0;

for (let i = 0; i < richText.length; i++) {

temporaryText = temporaryText + richText.charAt(i);

/* charCodeAt()返回指定位置的字符的Unicode编码,值为128以下时一个字符占一名,当值在128以上是一个字符占两位 */

if (richText.charCodeAt(i) > 128) {

strLength = strLength + 2;

if (strLength >= len) {

return temporaryText.substring(0, temporaryText.length - 1) + "...";

}

} else {

strLength = strLength + 1;

if (strLength >= len) {

return temporaryText.substring(0, temporaryText.length - 2) + "...";

}

}

}

return temporaryText;

}

2.vue中运用过滤器filters: {

localData(value) {

let date = new Date(value * 1000);

let Month = date.getMonth() + 1;

let Day = date.getDate();

let Y = date.getFullYear() + '年';

let M = Month < 10 ? '0' + Month + '月' : Month + '月';

let D = Day + 1 < 10 ? '0' + Day + '日' : Day + '日';

let hours = date.getHours();

let minutes = date.getMinutes();

let hour = hours < 10 ? '0' + hours + ':' : hours + ':';

let minute = minutes < 10 ? '0' + minutes : minutes;

return Y + M + D + ' ' + hour + minute;

}

}

/* 运用,直接在div中增加就能够了,| 前面的是参数,背面的是过滤器 */

{{data.etime | localData}}

3.微信小顺序中运用过滤器新建.wxs文件var localData = function (value) {

var date = getDate(value * 1000);

var Month = date.getMonth() + 1;

var Day = date.getDate();

var hours = date.getHours(); //盘算盈余的小时

var minutes = date.getMinutes(); //盘算盈余的分钟

var Y = date.getFullYear() + '-';

var M = Month < 10 ? '0' + Month + '-' : Month + '-';

var D = Day + 1 < 10 ? '0' + Day + '' : Day + '';

var H = hours < 10 ? '0' + hours + ':' : hours + ':'

var m = minutes < 10 ? '0' + minutes : minutes;

return Y+M + D + " " + H + m;

}

module.exports = {

localData: localData

}运用,用标签来引入,src为途径,module为引入的文件模块名

{{tool.filterScore(item.shop.score)}}分直接在.wxml文件顶用包裹

var some_msg = "hello world";

module.exports = {

msg : some_msg,

}

{{foo.msg}}

4.react中运用react中运用,实在就是定义一个要领import noBanner from '@/assets/storeDetail/no-banner.jpg'

const filterImg = item => {

let bgImg;

if (item.shopimages == null) {

bgImg = noBanner;

} else {

bgImg = item.shopimages[0];

}

return bgImg;

};

/* 运用 */

正在努力进修中,若对你的进修有协助,留下你的印记呗(点个赞咯^_^)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/355866.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在基于简单Vertx Rest的应用程序上为REST资源设置基本响应HTTP标头

我是Vert.x的新手&#xff0c;但是作为Java开发人员&#xff08;非常努力&#xff09;&#xff0c;与NodeJS或其他任何基于Reactor的框架/库相比&#xff0c;我觉得它更加有趣并且很有前途。 因此&#xff0c;我正在使用Vert.x实现一个非常简单的Restful API。 今天的问题是我…

OAuth2认证有一定的了解

转到分享界面后&#xff0c;进行OAuth2认证&#xff1a; 以新浪为例&#xff1a; 第一步、WebView加载界面&#xff0c;传递参数 使用WebView加载登陆网页&#xff0c;通过Get方法传递三个参数&#xff1a;应用的appkey、回调地址和展示方式display(如手机设备为mobile)&#x…

声速的测量的实验原理和应用_CEMS烟气在线分析仪测量原理计经典应用

烟气连续在线监测系统运用抽取冷凝采样、后散射烟尘浓度测量、皮托管烟气流速测量及计算机网络通讯技术&#xff0c;实现了固定污染源污染物排放浓度和排放总量的在线连续监测。同时又针对国内煤种较杂、煤质变化大、污染物排放浓度高、烟气湿度大的状况从技术上进行了改进。并…

怎么用计算机算弧度制,怎么设置计算器 把度数转化为弧度

计算器默认角度制(D)。此时&#xff0c;按下mode&#xff0c;mode&#xff0c;2(Rad)&#xff0c;可将计算器调整为弧度制。输入要转化的角度(如30)&#xff0c;按下shift&#xff0c;ans(DRG三角)&#xff0c;1(D)&#xff0c;画面将显示30度&#xff0c;按下等号&#xff0c;…

Python 类方法、实例方法、静态方法

实例方法&#xff1a;类中第一个参数为self的方法。 类方法&#xff1a;类中第一个参数为类&#xff0c;约定写为cls&#xff0c;并被classmethod修饰的方法。 静态方法&#xff1a;类中被staticmethod修饰的方法。 类变量&#xff1a;定义在类的定义之后&#xff0c;如&#x…

python 方程组 整数解_用Python语言求解线性整数方程组

我在寻找一种用Python求解线性方程组的方法。特别是&#xff0c;我在寻找大于所有零的最小整数向量&#xff0c;并解出给定的方程。例如&#xff0c;我有以下等式&#xff1a;想解决。在在这种情况下&#xff0c;求解该方程的最小整数向量为。在但是&#xff0c;如何自动确定此…

计算机软件水平考试调整,全国计算机等级考试调整方案

考生们注意&#xff1a;在新的历史时期&#xff0c;全国计算机等级考试将在保持自身特色&#xff0c;稳定发展的基础上进一步推进考试改革&#xff0c;从2018年3月起&#xff0c;教育部考试中心将实施2018年考试大纲&#xff0c;并按新体系开考各个考试级别&#xff0c;希望能帮…

javaserver_集成Spring和JavaServer Faces:改进的模板

javaserver随着2.0版的发布&#xff0c;Facelet模板成为JSF规范的核心部分。 使用<ui&#xff1a;composition>和<ui&#xff1a;decorate>标记&#xff0c;可以轻松构建复杂的页面&#xff0c;同时仍保持标记的整洁。 模板在创建HTML表单时特别有用&#xff0c;但…

datagrid 什么时候结束编辑_孕吐到底什么时候结束

很多女性刚怀孕&#xff0c;都会出现妊娠反应&#xff0c;比如孕吐。它是由妊娠后绒毛分泌的绒毛膜促进腺激素引起的&#xff0c;在妊娠初期腺激素分泌量较多。备受孕吐折磨的女性&#xff0c;每次吃饭&#xff0c;一闻到刺激性味道&#xff0c;就会想吐&#xff0c;非常难受&a…

201521123032 《Java程序设计》第7周学习总结

1. 本周学习总结 以你喜欢的方式&#xff08;思维导图或其他&#xff09;归纳总结集合相关内容。 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 在contains方法中调用indexOF方法&#xff0c;首先比较下标o&#xff0c;如果onull那么elementData[]中是否n…

计算机图形图像电影论文,计算机图形图像绘制技术地现状分析及应用发展.doc...

计算机图形图像绘制技术地现状分析及应用发展计算机图形图像绘制技术的现状分析及应用发展-计算机论文计算机图形图像绘制技术的现状分析及应用发展金晓倩 JIN Xiao-qian(四川建筑职业技术学院&#xff0c;德阳618000)(Sichuan College of Architectural Technology&#xff0c…

Java EE 7之前版本替代JPA 2.1的非同步持久性上下文

Java EE 7中的非同步持久性上下文 JPA 2.1引入了非同步持久性上下文的概念&#xff0c;该概念允许对JPA实体管理器的刷新进行细粒度控制&#xff0c;即通过显式调用EntityManager&#xff03;joinTransaction 。 以前&#xff0c;这默认情况下是JTA事务的结束&#xff0c;例如&…

三相同步电机怎么接线图_三相电度表怎么看倍数

电工之家&#xff1a;www.dgzj.com QQ群&#xff1a;2179090关注电工之家官方微信公众号“电工之家”&#xff0c;收获更多经验知识。从题主给的照片来看&#xff0c;这个电度表型号是DTS901-4 1.5(6)A 3X220V/380V精确度为1的1级互感器间接接线的三相四线有功电子电度表。那…

第七周进度表

所花时间 7   代码量&#xff08;行&#xff09; 235 博客量 2 所学知识点 了解了结队开发 转载于:https://www.cnblogs.com/muxiaozhou/p/6993180.html

中国计量大学调剂计算机技术,2020年中国计量大学硕士研究生招生调剂公告

一、调剂分数线&#xff1a;详见《中国计量大学2020年硕士研究生招生复试分数线》。二、调剂程序&#xff1a;1.第一阶段&#xff1a;登陆我校“研究生招生信息系统”网址https://yjsb.cjlu.edu.cn/yjszs_xsb/登记调剂信息。此信息用于复试&#xff0c;请务必认真准确填写。2.第…

linux msgrcv阻塞接收_linux下高并发服务器实现

在做网络服务的时候tcp并发服务端程序的编写必不可少。tcp并发通常有几种固定的设计模式套路&#xff0c;他们各有优点&#xff0c;也各有应用之处。下面就简单的讨论下这几种模式的差异&#xff1a;单进程&#xff0c;单线程在accept之后&#xff0c;就开始在这一个连接连接上…

Maven配置tomcat和jetty插件来运行项目

针对eclipse中的Run on Server有些情况下并不是那么好操作&#xff0c;比如配置maven下的springmvc插件&#xff0c;如果使用此方法运行会很容易出现组件缺少导致错误出现一大堆的问题。 那么针对这种情况&#xff0c;maven下的容器插件tomcat和jetty做了很好的支持。比如在mav…

使用Apache Storm和Kite SDK Morphlines的可配置ETL处理

从我担任软件工程师的第一天起&#xff0c;我总是听到很多方面的相同要求&#xff1a; “ 我们希望所有内容都可配置&#xff0c;我们希望在运行时更改所有内容&#xff0c;我们希望有一个可视化工具来应用所有这些逻辑&#xff0c;以便非开发人员使用和配置我们的应用程序。 …

宁夏警官学院计算机专业,宁夏警官职业学院毕业设计模板.docx

宁夏警官职业学院本科生毕业论文题目&#xff1a;基于人工智能的宁夏警官职业学院的论文排版系统研究姓 名&#xff1a; 宁夏警官职业学院论文学 号&#xff1a; 20185091612院 系&#xff1a; 宁夏警官职业学院信息学院专 业&#xff1a; 计算机指导教师&#xff1a; Megan教授…

oracle 闪回操作(flashback)

234390216 的留下学习 原文地址 http://haohaoxuexi.iteye.com/blog/1594391 Oracle的闪回功能可以在对数据库进行不完全恢复的情况下&#xff0c;对某一个指定的表进行恢复。闪回数据库是进行时间点恢复的新方法&#xff0c;它能够快速将Oracle恢复到以前的时间&#xff0c;以…