vue项目提取富文本里的纯文本作为描述

1、过滤器中使用正则表达式

 filters: {
    filtersText(val) { // 要判断一下,如果是空就返回空字符串,不然会报错
      if (val != null && val != '') {
        var reg = /[\u4e00-\u9fa5]/g
        var names = val.match(reg)
        val = names.join('')
        return val.substr(0, 50);//获取富文本文字内容的前50个字符
      } else return ''
    }
  }
// 在文本中使用
// {{ruleForm.content | filtersText}}

2

其实从html富文本中提取纯文本很简单,富文本基本上是使用html标签给文本加上丰富多彩的样式。

所以只需要将富文本字符串中的“<.....>”标签剔除,即可得到纯文本。我们可以使用正则表达式,来匹配所有的html标签,并替换成空字符,如下:

//html剔除富文本标签,留下纯文本

function getSimpleText(html){
var re1 = new RegExp("<.+?>","g");//匹配html标签的正则表达式,"g"是搜索匹配多个符合的内容
var msg = html.replace(re1,'');//执行替换成空字符
return msg;
}

 

  • 12
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用一些流行的富文本编辑器,如Quill、TinyMCE或CKEditor等。这些富文本编辑器通常都有插入图片和文字的功能,并且可以在Vue项目使用。 以下是一个使用Quill富文本编辑器的示例: 1. 安装Quill ```bash npm install quill --save ``` 2. 在Vue组件引入Quill ```javascript import Quill from 'quill' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' ``` 3. 在Vue组件使用Quill ```html <template> <div> <div ref="editor"></div> </div> </template> <script> export default { mounted() { // 初始化Quill编辑器 const options = { theme: 'snow' // 主题 } const editor = new Quill(this.$refs.editor, options) // 插入图片 const input = document.createElement('input') input.setAttribute('type', 'file') input.setAttribute('accept', 'image/*') input.addEventListener('change', () => { const file = input.files[0] const reader = new FileReader() reader.onload = (e) => { const range = editor.getSelection(true) const index = range.index + range.length editor.insertEmbed(index, 'image', e.target.result) } reader.readAsDataURL(file) }) editor.getModule('toolbar').addHandler('image', () => { input.click() }) } } </script> ``` 在上述示例,我们在Vue组件的`mounted()`函数初始化了一个Quill编辑器,并添加了插入图片的功能。要插入图片,我们首先创建了一个`<input>`元素,用于选择要插入的图片文件。然后,我们将其添加到Quill编辑器的工具栏,并在点击时触发`change`事件,读取所选文件的数据URL并将其作为图像嵌入到编辑器
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值