マークダウンデータがあると仮定すると、データの紹介として記事の最初の漢字100文字を切り取る必要がありますが、 ## (副題)、<font color="#ddd"> (フォントを設定) が多数あります。データ内に色)...などがあります。これらはデータの先頭で発生する可能性があり、表示する前に処理する必要があります。注: この記事では 2 つの方法の欠点を要約しており、実際のニーズに応じて使用してください。
マークダウンデータのリストは次のとおりです。
let mdStr = '## 一段文字\n\n这是一段<font color="pink">彩色的文字</font>\n 这是第二段文字.......'
まず、プロジェクトでマークされたものをインストールする必要があります
npm i marked --save
次に、使用する必要があるコンポーネントに導入します。
import {
marked} from "marked";
次にデータの処理を開始します
1. マークダウン修飾子を正規表現検証に直接置き換えます。
この方法は文字の色などを保持できるため、キーワード検索後に該当する結果を強調表示するためによく使用されます。欠点は、影響を受ける可能性のあるさまざまなフィールドを処理する必要があり、いくつかの組み合わせられたキャラクター効果の処理が難しいことです。
mdStr の例を次に示します。
let formateStr = marked.parse(mdStr.replace(/(\s+$)|(#+\s)|(\n+)/g,' ')
console.log(formateStr)
分析:
\s+$テキスト内の複数の空白を 1 つの空白に置き換えて、テキスト
#+\s間のスペースを減らします。タイトルのテキスト スタイルを削除し、スペースを使用して他のテキストと区切ります。
\n+改行形式を削除して、スペースや他のテキストに置き換えます。
2. 表示内容を2回修正します
これは主に 1 つの記事の紹介に使用され、ネイティブ処理メソッドの使用が必要です。
1. マークダウン データをレンダリングする
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 操作が必要であり、レンダリングの完了後に再割り当てする必要があります。microcycle を必要とする表示が発生した場合は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})。そうでない場合は、マークダウン形式が表示されます。
補足:以下のようなバックエンド担当者から渡されるnullデータには注意してください。
let mdStr = null
this.list.push({
content:marked.parse(mdStr )//这里执行不通过，且会无任何错误提示
})
...//这里省略其他操作语句
マークが解析されると問題nullが発生し、コードの実行が停止しますが、コンソールはエラーを報告せず、次のステートメントは実行されません。会計担当者とドッキング担当者は、データの形式を事前に確認し、上記のような場合に備えて事前に対処することをお勧めします。
content:mdStr && marked.parse(mdStr)||''//当处理数据为null时，传空字符串