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


Posted in Javascript onNovember 21, 2018

在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容;然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过

1.富文本去除html标签

去除html标签及 空格

let richText = ' <p style="font-size: 25px;color: white">       sdaflsjf的丰富及饿哦塞尔</p><span>dsfjlie</span>';
/* 去除富文本中的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中添加就可以了,| 前面的是参数,后面的是过滤器 */
<div class="time">{{data.etime | localData}}</div>

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
}

使用,用<wxs />标签来引入,src为路径,module为引入的文件模块名

<wxs src="./filters.wxs" module="tool" />
<text class="scoreText">{{tool.filterScore(item.shop.score)}}分</text>

直接在.wxml文件中用<wxs></wxs>包裹

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>

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;
};
/* 使用 */ 
<img src={filterImg(storeitem)} className={style.topImg} alt="" />

总结

以上所述是小编给大家介绍的如何去除富文本中的html标签及vue、react、微信小程序中的过滤器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
Javascript中typeof 用法小结
May 12 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
jquery实现网页定位导航
Aug 23 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
react 生命周期实例分析
May 18 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 Javascript
JSON生成Form表单的方法示例
Nov 21 #Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 #Javascript
vue中组件的过渡动画及实现代码
Nov 21 #Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 #Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 #Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 #Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 #Javascript
You might like
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python自动生产表情包
2017/03/17 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
python实现的汉诺塔算法示例
2019/10/23 Python
浅析Python面向对象编程
2020/07/10 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
学雷锋演讲稿
2014/03/04 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
劳动仲裁调解书
2015/05/20 职场文书
儿子满月酒致辞
2015/07/29 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
党组织结对共建协议书
2016/03/23 职场文书