在前面文章中，我们已经将项目的环境配置完毕并安装了tailwind，但在编写页面之前，我们先写检测文章代码部分，后续当我们把页面布局写好之后将它引入使用就可以了。
在线使用地址：qc2168.github.io/article-inf…
类
需求
检测文章中代码和代码块内容的占比率。（先写匹配这两个的需求，后面我们可以再补充匹配其他的内容）
创建类
创建并导出一个CheckArticle类，这个类用于检测我们文章内容。
他需要传入一个参数，是用户输入的文章内容。我们在constructor函数中接收它，并绑定到类中的articleContent属性。再定义articleCount记录文章长度。
export default class CheckArticle {
private articleContent: string;
public articleCount: number;
constructor(content:string) {
this.articleContent = content;
this.articleCount = content.length;
}
}
将上次我们匹配代码和代码块的正则表达式拿过来，在constructor函数中绑定到shortCodeReg、longCodeReg属性中。
export default class CheckArticle {
private readonly shortCodeReg: RegExp;
private readonly longCodeReg: RegExp;
constructor(content:string) {
// ... 忽略一些代码
// 匹配代码
this.shortCodeReg = /`(.*?)`/g;
// 匹配代码块
this.longCodeReg = /```([\s\S]*?)```/g;
}
}
匹配内容
在类中定义matchShortCode方法，用于匹配articleContent中的代码，返回代码的总长度。
matchShortCode() {
let shortCodeResult: RegExpMatchArray | null = this.articleContent.match(this.shortCodeReg);
if (shortCodeResult) {
shortCodeResult = shortCodeResult.filter((item: string) => item !== '``');
let sum: number = 0;
shortCodeResult.forEach((item: string) => {
sum += (item.length - 2);
});
return sum;
}
return 0;
}
在类中定义matchLongCode方法，用于匹配articleContent中的代码块，返回代码块的总长度。
matchLongCode() {
let longCodeResult: RegExpMatchArray | null = this.articleContent.match(this.longCodeReg);
if (longCodeResult) {
longCodeResult = longCodeResult.filter((item: string) => item !== '``');
let sum: number = 0;
longCodeResult.forEach((item: string) => {
item.replace(/[\r\n]/g, '');
sum += (item.length - 6);
});
return sum;
}
return 0;
}
在类中定义getCodePercent方法，传入一个数值，计算这个数值与文字总长度的占比。
getCodePercent(num:number):string {
return `${((num / this.articleCount) * 100).toFixed(2)}%`;
}
当文章被修改时，需要让articleContent属性中的值进行变动，在类中定义changeContent方法，传入新的文章内容，将原本的文章内容替换成新的。
changeContent(content:string):void {
this.articleContent = content;
this.articleCount = content.length;
}
在类中的constructor函数中，加入以下代码，分别为：
- 获取当前代码的总长度
- 获取当前代码块的总长度
- 获取当前代码占比文章长度的百分比
- 获取当前代码块占比文章长度的百分比
export default class CheckArticle {
private shortCodeLen: number;
private longCodeLen: number;
private shortPercent: string;
private longPercent: string;
constructor(content:string) {
// ... 忽略一些代码
this.shortCodeLen = this.matchShortCode();
this.longCodeLen = this.matchLongCode();
this.shortPercent = this.getCodePercent(this.shortCodeLen);
this.longPercent = this.getCodePercent(this.longCodeLen);
}
}
CheckArticle.ts完整代码请前往：github.com/QC2168/arti…
由于这个是ts文件，我们不能直接将这个文件跑起来。我们在index.ts中引入这个类，借助webpack构建时将这个类进行打包转成JavaScript文件进行测试。
或者是在main.ts文件也引入也可以的，main是整个项目的入口。
import CheckArticle from './CheckArticle';
// ... 忽略一些代码
const CA = new CheckArticle('文章内容...');
console.log(CA.matchShortCode()) // 获取代码长度
console.log(CA.matchLongCode()) // 获取代码块长度
在实例化CheckArticle类的时候，我们将文章内容传入给他。
再通过类中的matchShortCode和matchLongCode方法分别获取代码和代码块的长度。如果你想获取占比率，可以使用类中的getCodePercent方法，需要传入一个长度，用于计算传入的这个长度与文章总长度的占比率。该方法返回的是一个字符串。
\
