前提：在做項(xiàng)目中有個(gè)需求是填寫(xiě)表單后生成一份文檔，文檔可以編輯、保存。
這部分用富文本處理了，涉及到的邏輯就是對(duì)象-->富文本標(biāo)簽形式
在給后端傳的數(shù)據(jù)格式再把富文本標(biāo)簽形式-->對(duì)象形式。
涉及到文字，圖片、表格，以及圖片表格的標(biāo)題。
數(shù)據(jù)截取處理
// 數(shù)據(jù)截取處理
extractString(str, startChar, endChar) {
const pattern = `${startChar}(.*?)${endChar}`;
const regex = new RegExp(pattern);
const matches = str.match(regex);
return matches ? matches[1] : '';
},用法：
let a = this.extractString(item, '<img', '</p>')?item就是要處理的字串，后面一個(gè)開(kāi)始元素，一個(gè)結(jié)束元素。
富文本去除所有標(biāo)簽
str='<div class="proposal-content" style="text-indent:2em; font-size:16px; line-height:1.5">光伏組件在運(yùn)行過(guò)程中，光電轉(zhuǎn)換效率會(huì)受到影響，輸出功率有所降低。本報(bào)告年衰減率根據(jù)《光伏制造行業(yè)規(guī)范條件（2021年本）》計(jì)算，晶硅組件衰減率首年不高于2.5%，后續(xù)每年不高于0.6%。</div>'
let a = str.replace(/<[^>]+>/g, '')
// 得到的結(jié)果就是去除所有標(biāo)簽的：光伏組件在運(yùn)行過(guò)程中，光電轉(zhuǎn)換效率會(huì)受到影響，輸出功率有所降低。本報(bào)告年衰減率根據(jù)《光伏制造行業(yè)規(guī)范條件（2021年本）》計(jì)算，晶硅組件衰減率首年不高于2.5%，后續(xù)每年不高于0.6%。.replace替換其他數(shù)據(jù)：
proposalString = proposalString.replace(new RegExp('<p data-we-empty-p="" style="padding-left:2em;">', 'g'), paragraph);‘g’是全局替換，不然只會(huì)替換第一個(gè)。
富文本轉(zhuǎn)對(duì)象大致實(shí)現(xiàn)思路：
因?yàn)橐獢?shù)據(jù)對(duì)應(yīng)，以下是后端傳過(guò)來(lái)的數(shù)據(jù)：
let obj = [
{
content:
'合浦位于廣西壯族自治區(qū)北海市合浦縣合浦閘口鎮(zhèn)。項(xiàng)目所在地的經(jīng)緯度坐標(biāo)為21.69°N, 109.52°E。\n合浦縣，屬亞熱帶季風(fēng)型海洋性氣候區(qū)，日照較強(qiáng)，熱量充足，雨量充沛，夏熱冬暖，無(wú)霜期長(zhǎng)。氣候受季風(fēng)環(huán)流控制，雨熱同季。冬干夏濕，夏無(wú)酷暑，冬無(wú)嚴(yán)寒，盛行風(fēng)向有明顯的季節(jié)性轉(zhuǎn)換，在沿海鄉(xiāng)鎮(zhèn)還有晝夜交替的海陸風(fēng)出現(xiàn)。由于各季節(jié)雨熱不均以及瀕臨北部灣，主要?dú)庀鬄?zāi)害有臺(tái)風(fēng)、暴雨、干旱、低溫陰雨及霜凍、冰雹、雷電和龍卷風(fēng)等。主要?dú)夂蛱卣魇悄昶骄鶜鉁仄?，年總降雨量偏多，年總?cè)照諘r(shí)數(shù)偏多。\n',
image: {
title: '項(xiàng)目所在位置圖',
path: 'https://xidianai.oss-cn-hangzhou.aliyuncs.com/xdai_78abb1eb_loc_map.png',
index: 1,
},
table: {
title: '',
rowNum: '',
colNum: '',
head: [],
content: [],
},
},
];對(duì)應(yīng)回顯在富文本，
思路：遍歷數(shù)據(jù)結(jié)構(gòu)，加上標(biāo)簽，富文本本身是會(huì)回顯標(biāo)簽的
this.$nextTick(() => {
let content = '';
this.chapterList.chapterContent.forEach(item => {
if (item.content) {
content += item.content
.replace(/\n\n\n/g, '<br/> ')
.replace(/\n\n/g, '<br/> ');
content = content.replace(/\n/g, `<br/> `);
}
// 圖片回顯
if (item.image.path) {
content += `<div class="img" style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;"><img src=${item.image.path} /><div style="font-size: 14px;">圖${this.chapterList.chapterIndex}-${item.image.index} <span class="img-title">${item.image.title}</span></div></div><br/> `;
}
// 表格回顯
if (item.table.title) {
content += `<div class="table" style="width:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;"><span>表${this.chapterList.chapterIndex}-${item.table.index} ${item.table.title}</span><table border="1" cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr>`;
item.table.head.forEach(item => {
content += `<th>${item}</th>`;
});
content += `<tr>`;
item.table.content.forEach(item => {
content += `<tr>`;
item.forEach(item => {
content += `<td>${item}</td>`;
});
content += `</tr>`;
});
content += `</tbody></table></div><div class="proposal-content" style="text-indent:2em; font-size:16px; line-height:1.5"></div>`;
}
});
content = `<div class="proposal-content" style="text-indent:2em; font-size:16px; line-height:1.5">${content
.replace(`<br/> `, ``)
.replace(new RegExp('°E。'), `°E。<br/> `)}</div>`;
this.editor.txt.html(content);
});用戶編輯完成后保存，富文本轉(zhuǎn)對(duì)象操作思路：特定標(biāo)簽用replace()替換后，split()成數(shù)組，這樣obj就拿到了，然后遍歷，分開(kāi)處理content文字，圖片，以及圖片標(biāo)題，表格以及表格標(biāo)題。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-813349.html
// 保存
saveProposal() {
console.log(this.editor.txt.html());
let obj = [
{
content:
'合浦位于廣西壯族自治區(qū)北海市合浦縣合浦閘口鎮(zhèn)。項(xiàng)目所在地的經(jīng)緯度坐標(biāo)為21.69°N, 109.52°E。\n合浦縣，屬亞熱帶季風(fēng)型海洋性氣候區(qū)，日照較強(qiáng)，熱量充足，雨量充沛，夏熱冬暖，無(wú)霜期長(zhǎng)。氣候受季風(fēng)環(huán)流控制，雨熱同季。冬干夏濕，夏無(wú)酷暑，冬無(wú)嚴(yán)寒，盛行風(fēng)向有明顯的季節(jié)性轉(zhuǎn)換，在沿海鄉(xiāng)鎮(zhèn)還有晝夜交替的海陸風(fēng)出現(xiàn)。由于各季節(jié)雨熱不均以及瀕臨北部灣，主要?dú)庀鬄?zāi)害有臺(tái)風(fēng)、暴雨、干旱、低溫陰雨及霜凍、冰雹、雷電和龍卷風(fēng)等。主要?dú)夂蛱卣魇悄昶骄鶜鉁仄?，年總降雨量偏多，年總?cè)照諘r(shí)數(shù)偏多。\n',
image: {
title: '項(xiàng)目所在位置圖',
path: 'https://xidianai.oss-cn-hangzhou.aliyuncs.com/xdai_78abb1eb_loc_map.png',
index: 1,
},
table: {
title: '',
rowNum: '',
colNum: '',
head: [],
content: [],
},
},
];
// 段落
let paragraph = '<div class="proposal-content" style="text-indent:2em; font-size:16px; line-height:1.5">';
let proposalArr = [];
// let proposalString =
// '<div class="proposal-content" style="text-indent:2em; font-size:16px; line-height:1.5">光伏組件在運(yùn)行過(guò)程中，光電轉(zhuǎn)換效率會(huì)受到影響，輸出功率有所降低。本報(bào)告年衰減率根據(jù)《光伏制造行業(yè)規(guī)范條件（2021年本）》計(jì)算，晶硅組件衰減率首年不高于2.5%，后續(xù)每年不高于0.6%，25年內(nèi)不。本項(xiàng)目運(yùn)營(yíng)期內(nèi)逐年上網(wǎng)電量見(jiàn)下表。<div class="table" style="width:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;"><span>表6-1 本項(xiàng)目運(yùn)營(yíng)期逐年上網(wǎng)電量統(tǒng)計(jì)表</span></div><table border="0" width="100%" cellpadding="0" cellspacing="0"><tbody><tr><th>年份</th><th>年發(fā)電量萬(wàn)kWh</th><th>累計(jì)發(fā)電量萬(wàn)kWh</th><th>年利用小時(shí)數(shù)h</th></tr><tr></tr><tr><td>1</td><td>59525.59</td><td>59525.59</td><td>1026.3</td></tr><tr><td>19</td><td>55196.46</td><td>1089859.46</td><td>951.66</td></tr></tbody></table><p><br/></p> </div>';
let proposalString = this.editor.txt.html();
// text-align:left; text-align:center;替換（圖后文本）
proposalString = proposalString.replace(
new RegExp(
'<div class="proposal-content" style="text-indent:2em; font-size:16px; line-height:1.5; text-align:center;">',
'g'
),
paragraph
);
proposalString = proposalString.replace(
new RegExp(
'<div class="proposal-content" style="text-indent:2em; font-size:16px; line-height:1.5; text-align:left;">',
'g'
),
paragraph
);
// 新增文本
proposalString = proposalString.replace(new RegExp('<p data-we-empty-p="" style="padding-left:2em;">', 'g'), paragraph);
proposalString = proposalString.replace(new RegExp(paragraph), ``).replace(new RegExp(paragraph, 'g'), `aabb`).split('aabb');
proposalString.forEach(item => {
let content = '';
let image = {};
let table = {};
// 處理圖片數(shù)據(jù)
if (this.extractString(item, 'src="', '"').length > 0) {
image.path = this.extractString(item, 'src="', '"');
if (item.includes('<span class="img-title">')) {
// 圖片標(biāo)題
image.title = this.extractString(item, '<span class="img-title">', '</span>');
item = item.replace(this.extractString(item, '<img', '</span>'), '');
} else {
// 編輯圖片標(biāo)題（居中）
image.title = this.extractString(item, '<p data-we-empty-p="" style="text-align:center;">', ' ');
image.title = this.extractString(item, image.title, '</p>');
// 去除img文字
item = item.replace(this.extractString(item, '<img', '</p>'), '');
}
} else {
image.path = '';
image.title = '';
}
// 處理表格數(shù)據(jù)
if (item.indexOf('tbody><tr><th>') > -1) {
let tableData = this.extractString(item, '<table', '</table>');
let tableHeadArr = []; // 截取的要處理的數(shù)據(jù)
let head = []; // 表頭
let contentList = []; // 表格內(nèi)容
// 獲取表頭
if (item.indexOf('<th>') > -1) {
tableHeadArr = tableData.replace(new RegExp('<th>', 'g'), 'tableHead').split('tableHead');
}
tableHeadArr.forEach(m => {
if (m.indexOf('</th>') > -1) {
head.push(this.extractString(m, '', '</th>'));
}
});
// 獲取表格內(nèi)容
let tableContentOld = tableData.split('</th></tr>')[1]
if (tableContentOld.indexOf('<tr><td>') > -1) {
tableContentOld = tableContentOld.replace(new RegExp('<tr><td>', 'g'), 'tableContent').split('tableContent');
tableContentOld.forEach(m => {
let contentArr = []
if(m.replace(/<[^>]+>/g, '')){
m.replace(new RegExp('</td>', 'g'),'cloumn').replace(new RegExp('<td>', 'g'),'').split('cloumn').forEach((n)=>{
if(n.replace(/<[^>]+>/g, '')){
contentArr.push(n);
}
})
contentList.push(contentArr);
}
})
// 去除table文字
item = item.replace(this.extractString(item, '<img', '</p>'), '');
}
// table.title = title;
table.head = head
table.content = contentList
table.colNum = head.length
table.rowNum = contentList.length
}
// 段落文字處理（去除圖片、表格數(shù)據(jù)、標(biāo)簽、占位符等）
content = item.replace(new RegExp('<br/> ', 'g'), '\n').replace(/<[^>]+>/g, '');
proposalArr.push({ content: content, image: image, table: table });
});
console.log(proposalArr);
},?代碼貼在這里，存在冗余，大致提供一個(gè)思路，因?yàn)樾枨筮€沒(méi)評(píng)審，暫時(shí)把這部分功能做出來(lái)了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-813349.html
到了這里，關(guān)于數(shù)據(jù)截取處理、富文本去除所有標(biāo)簽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
