数据截取处理、富文本去除所有标签
前提：在做项目中有个需求是填写表单后生成一份文档，文档可以编辑、保存。
这部分用富文本处理了，涉及到的逻辑就是对象-->富文本标签形式
在给后端传的数据格式再把富文本标签形式-->对象形式。
涉及到文字，图片、表格，以及图片表格的标题。
数据截取处理
// 数据截取处理
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, '') item就是要处理的字串，后面一个开始元素，一个结束元素。
富文本去除所有标签
str='光伏组件在运行过程中，光电转换效率会受到影响，输出功率有所降低。本报告年衰减率根据《光伏制造行业规范条件（2021年本）》计算，晶硅组件衰减率首年不高于2.5%，后续每年不高于0.6%。'
let a = str.replace(/<[^>]+>/g, '').replace替换其他数据：
proposalString = proposalString.replace(new RegExp('', 'g'), paragraph);
‘g’是全局替换，不然只会替换第一个。
富文本转对象大致实现思路：
因为要数据对应，以下是后端传过来的数据：
let obj = [
{
content:
'合浦位于广西壮族自治区北海市合浦县合浦闸口镇。项目所在地的经纬度坐标为21.69°N, 109.52°E。\n合浦县，属亚热带季风型海洋性气候区，日照较强，热量充足，雨量充沛，夏热冬暖，无霜期长。气候受季风环流控制，雨热同季。冬干夏湿，夏无酷暑，冬无严寒，盛行风向有明显的季节性转换，在沿海乡镇还有昼夜交替的海陆风出现。由于各季节雨热不均以及濒临北部湾，主要气象灾害有台风、暴雨、干旱、低温阴雨及霜冻、冰雹、雷电和龙卷风等。主要气候特征是年平均气温偏高，年总降雨量偏多，年总日照时数偏多。\n',
image: {
title: '项目所在位置图',
path: 'https://xidianai.oss-cn-hangzhou.aliyuncs.com/xdai_78abb1eb_loc_map.png',
index: 1,
},
table: {
title: '',
rowNum: '',
colNum: '',
head: [],
content: [],
},
},
];对应回显在富文本，
思路：遍历数据结构，加上标签，富文本本身是会回显标签的
this.$nextTick(() => {
let content = '';
this.chapterList.chapterContent.forEach(item => {
if (item.content) {
content += item.content
.replace(/\n\n\n/g, '
')
.replace(/\n\n/g, '
');
content = content.replace(/\n/g, `
`);
}
// 图片回显
if (item.image.path) {
content += `
图${this.chapterList.chapterIndex}-${item.image.index} ${item.image.title}
`;
}
// 表格回显
if (item.table.title) {
content += `表${this.chapterList.chapterIndex}-${item.table.index} ${item.table.title}`;
item.table.head.forEach(item => {
content += `${item} `;
});
content += ` `;
item.table.content.forEach(item => {
content += ` `;
item.forEach(item => {
content += `${item} `;
});
content += ` `;
});
content += `
`;
}
});
content = `${content
.replace(`
`, ``)
.replace(new RegExp('°E。'), `°E。
`)}`;
this.editor.txt.html(content);
});用户编辑完成后保存，富文本转对象操作思路：特定标签用replace()替换后，split()成数组，这样obj就拿到了，然后遍历，分开处理content文字，图片，以及图片标题，表格以及表格标题。
// 保存
saveProposal() {
console.log(this.editor.txt.html());
let obj = [
{
content:
'合浦位于广西壮族自治区北海市合浦县合浦闸口镇。项目所在地的经纬度坐标为21.69°N, 109.52°E。\n合浦县，属亚热带季风型海洋性气候区，日照较强，热量充足，雨量充沛，夏热冬暖，无霜期长。气候受季风环流控制，雨热同季。冬干夏湿，夏无酷暑，冬无严寒，盛行风向有明显的季节性转换，在沿海乡镇还有昼夜交替的海陆风出现。由于各季节雨热不均以及濒临北部湾，主要气象灾害有台风、暴雨、干旱、低温阴雨及霜冻、冰雹、雷电和龙卷风等。主要气候特征是年平均气温偏高，年总降雨量偏多，年总日照时数偏多。\n',
image: {
title: '项目所在位置图',
path: 'https://xidianai.oss-cn-hangzhou.aliyuncs.com/xdai_78abb1eb_loc_map.png',
index: 1,
},
table: {
title: '',
rowNum: '',
colNum: '',
head: [],
content: [],
},
},
];
// 段落
let paragraph = '';
let proposalArr = [];
// let proposalString =
// '光伏组件在运行过程中，光电转换效率会受到影响，输出功率有所降低。本报告年衰减率根据《光伏制造行业规范条件（2021年本）》计算，晶硅组件衰减率首年不高于2.5%，后续每年不高于0.6%，25年内不。本项目运营期内逐年上网电量见下表。表6-1 本项目运营期逐年上网电量统计表年份 年发电量万kWh 累计发电量万kWh 年利用小时数h 1 59525.59 59525.59 1026.3 19 55196.46 1089859.46 951.66
';
let proposalString = this.editor.txt.html();
// text-align:left; text-align:center;替换（图后文本）
proposalString = proposalString.replace(
new RegExp(
'',
'g'
),
paragraph
);
proposalString = proposalString.replace(
new RegExp(
'',
'g'
),
paragraph
);
// 新增文本
proposalString = proposalString.replace(new RegExp('', '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 = {};
// 处理图片数据
if (this.extractString(item, 'src="', '"').length > 0) {
image.path = this.extractString(item, 'src="', '"');
if (item.includes('')) {
// 图片标题
image.title = this.extractString(item, '', '');
item = item.replace(this.extractString(item, ''), '');
} else {
// 编辑图片标题（居中）
image.title = this.extractString(item, '', ' ');
image.title = this.extractString(item, image.title, '
');
// 去除img文字
item = item.replace(this.extractString(item, ''), '');
}
} else {
image.path = '';
image.title = '';
}
// 处理表格数据
if (item.indexOf('tbody>') > -1) {
let tableData = this.extractString(item, '');
let tableHeadArr = []; // 截取的要处理的数据
let head = []; // 表头
let contentList = []; // 表格内容
// 获取表头
if (item.indexOf('') > -1) {
tableHeadArr = tableData.replace(new RegExp(' ', 'g'), 'tableHead').split('tableHead');
}
tableHeadArr.forEach(m => {
if (m.indexOf(' ') > -1) {
head.push(this.extractString(m, '', ' '));
}
});
// 获取表格内容
let tableContentOld = tableData.split('') > -1) {
tableContentOld = tableContentOld.replace(new RegExp(' ', 'g'), 'tableContent').split('tableContent');
tableContentOld.forEach(m => {
let contentArr = []
if(m.replace(/<[^>]+>/g, '')){
m.replace(new RegExp(' ', 'g'),'cloumn').replace(new RegExp('', 'g'),'').split('cloumn').forEach((n)=>{
if(n.replace(/<[^>]+>/g, '')){
contentArr.push(n);
}
})
contentList.push(contentArr);
}
})
// 去除table文字
item = item.replace(this.extractString(item, ''), '');
}
// table.title = title;
table.head = head
table.content = contentList
table.colNum = head.length
table.rowNum = contentList.length
}
// 段落文字处理（去除图片、表格数据、标签、占位符等）
content = item.replace(new RegExp('
', 'g'), '\n').replace(/<[^>]+>/g, '');
proposalArr.push({ content: content, image: image, table: table });
});
console.log(proposalArr);
},
代码贴在这里，存在冗余，大致提供一个思路，因为需求还没评审，暂时把这部分功能做出来了。
你可能感兴趣的:(前端,javascript,开发语言)