数据截取处理、富文本去除所有标签

前提：在做项目中有个需求是填写表单后生成一份文档，文档可以编辑、保存。

这部分用富文本处理了，涉及到的逻辑就是对象-->富文本标签形式

在给后端传的数据格式再把富文本标签形式-->对象形式。

涉及到文字，图片、表格，以及图片表格的标题。

数据截取处理

        // 数据截取处理
        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 += ``;
                                    });
                                    content += ``;
                                    item.table.content.forEach(item => {
                                        content += ``;
                                        item.forEach(item => {
                                            content += ``;
                                        });
                                        content += ``;
                                    });
                                    content += `
${item}
${item}
`;
                                }
                            });
                            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]
                    if (tableContentOld.indexOf('') > -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);
        },

 代码贴在这里，存在冗余，大致提供一个思路，因为需求还没评审，暂时把这部分功能做出来了。