vue截取markdown数据生成简介文字处理（记录）

假设有一段markdown数据，要求你截取该文章前100个汉字作为数据简介，但数据中有很多##(二级标题)、<font color=“#ddd”>(设置字体颜色)…等等，有可能在数据开头就碰到了这些，需要处理后再展示。注意：本篇总结两种方式各有不足，根据自己的实际需求使用

这里列举一个markdown数据：

let mdStr = '## 一段文字\n\n这是一段<font color="pink">彩色的文字</font>\n     这是第二段文字.......'

首先，需要在项目中安装marked

npm i marked --save

然后在需要用到的组件中引入

import {marked} from "marked";

接下来开始处理数据

---

一、直接用正则表达式校验替换markdown修饰符

这种方式可以保留字符的颜色等，常用于关键字检索后突出结果相关。缺点是，需要对多种可能影响的字段进行处理，对于一些组合字符效果处理有一定困难。
此处用举的例子mdStr示例：

let formateStr = marked.parse(mdStr.replace(/(\s+$)|(#+\s)|(\n+)/g,' ')
console.log(formateStr)

解析：
\s+$将文字多个空白间隔替换为一个，减少文字间间距；
#+\s去除标题文字样式，用空格与其他文字间隔开;
\n+去掉换行格式，换成用空格与其他文字间隔开的方式

---

二、将展示内容二次修改

主要用于文章单篇简介，需要用到原生处理方式:
1、渲染markdown数据
2、重新获取渲染出的文字内容赋值

<template>
	<div ref="showArea" v-html="content"><div>
</template>
<script>
//模拟数据
let mdStr = '## 一段文字\n\n这是一段<font color="pink">彩色的文字</font>\n     这是第二段文字111111';
import {marked} from "marked";
export default{
	data(){
		return {content:""}
	},
	mounted(){
		this.initData();
	},
	methods:{
		initData(){
			this.content = marked.parse(mdStr);
			this.$nextTick(() => {
				//获取文字内容并截取前50个文字展示
				this.content = this.$refs.showArea.innerText.slice(0,51) + "...";
			})
		}
	}

}
</script>

注意：这种方法需要对dom操作，需要在渲染完成后再重新赋值。如果碰到需要微循环v-for的展示，建议使用原生方法获取dom元素：

<template>
	<div v-for="(item,i) in list" :key="i">
		<div :id="`showArea${i}`" :ref="`showArea${i}`" v-html="item.data"></div>
	<div>
</template>
<script>
//模拟数据
let mdStr = '## 一段文字\n\n这是一段<font color="pink">彩色的文字</font>\n     这是第二段文字111111';
import {marked} from "marked";
export default{
	data(){
		return {content:"",list:[]}
	},
	mounted(){
		this.initData();
	},
	methods:{
		initData(){
			this.content = marked.parse(mdStr);//模拟数据
			new Promise(r=>{
				for(var i=0;i<2;i++){
					this.list.push({data:this.content})
					if(i==1)r();
				}
			}).then(_=>{
				this.$nextTick(() => {
					//console.log(this.$refs.showArea0)//这里打印结果是null，尝试document原生方法有值，所以采用如下：
					//获取文字内容并截取前50个文字展示
					for(var i=0;i<this.list.length;i++){
						this.list[i].data= document.getElementById(`showArea${i}`).innerText.slice(0,20) + "...";
					}
				})
			})
		}
	}
}
</script>

注意：如果是循环生成文章简介，要将内容放置在{key:value}中，就比如上述例子中的this.list.push({data:this.content})，否则markdown格式依旧会显示。

---

补充： 要小心后端人员传给你的null数据，比如以下情况

let mdStr = null
this.list.push({
	content:marked.parse(mdStr )//这里执行不通过，且会无任何错误提示
})
...//这里省略其他操作语句

当marked解析null时会出问题，代码执行会卡住，但控制台不会报任何错误，接下来的语句也不会执行。建议宝子们和对接人员确认好数据的格式情况，对其他情况提前处理；比如上述案例可以这样：

content:mdStr && marked.parse(mdStr)||''//当处理数据为null时，传空字符串