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

1.富文本去除html标签

去除html标签及 空格

let richText = ' <p style="font-size: 25px;color: white">&nbsp; &nbsp; &nbsp; &nbsp;sdaflsjf的丰富及饿哦塞尔</p><span>dsfjlie</span>';
/* 去除富文本中的html标签 */
/* *、 限定符都是贪婪的,因为它们会尽可能多的匹配文字,只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。*/
let content = richText.replace(/<. ?>/g, '');
console.log(content);
/* 去除&nbsp; */
content = content.replace(/&nbsp;/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、微信小程序中的过滤器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对Devmax网站的支持!

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

  1. (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助

  2. Pandas如何将表格的前几行生成html实战案例

    这篇文章主要介绍了Pandas如何将表格的前几行生成html实战案例,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

  3. pytest生成简单自定义测试结果的html报告

    这篇文章主要为大家介绍了pytest生成简单自定义测试结果html报告,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  4. Element el-tag标签图文实例详解

    现在好多应用场景里会有一些需要给文章打标签等类似的操作,下面这篇文章主要给大家介绍了关于Element el-tag标签的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

  5. SpringBoot实现过滤器和拦截器的方法

    大家应该都晓得实现过滤器需要实现 javax.servlet.Filter 接口,而拦截器会在处理指定请求之前和之后进行相关操作,配置拦截器需要两步,本文通过实例代码给大家介绍SpringBoot 过滤器和拦截器的相关知识,感兴趣的朋友一起看看吧

  6. Android 极光推送别名与标签方式

    这篇文章主要介绍了Android 极光推送别名与标签方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  7. HTML form表单提交方法案例详解

    这篇文章主要介绍了HTML form表单提交方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. AngularJS通过$sce输出html的方法

    不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候,发现用AngularJs输出html的时候,浏览器并不解析这些html标签,这里我们需要其显示angular输出的html能被浏览器解析怎么办呢?不知道Angularjs如何实现这种功能的通过这篇文章来看看吧。

  9. jsp自定义标签技术(实现原理与代码以及平台搭建步骤)

    由于jsp代码规范要求不能出现一句java代码。所有就有了jsp 的自定义标签技术

  10. angular将html代码输出为内容的实例

    今天小编就为大家分享一篇angular将html代码输出为内容的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部