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

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

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

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

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

数据截取处理

javascript 复制代码
        // 数据截取处理
        extractString(str, startChar, endChar) {
            const pattern = `${startChar}(.*?)${endChar}`;
            const regex = new RegExp(pattern);
            const matches = str.match(regex);
            return matches ? matches[1] : '';
        },

用法:

javascript 复制代码
let a = this.extractString(item, '<img', '</p>')

item就是要处理的字串,后面一个开始元素,一个结束元素。

富文本去除所有标签

javascript 复制代码
str='<div class="proposal-content" style="text-indent:2em; font-size:16px; line-height:1.5">光伏组件在运行过程中,光电转换效率会受到影响,输出功率有所降低。本报告年衰减率根据《光伏制造行业规范条件(2021年本)》计算,晶硅组件衰减率首年不高于2.5%,后续每年不高于0.6%。</div>'
let a = str.replace(/<[^>]+>/g, '')
// 得到的结果就是去除所有标签的:光伏组件在运行过程中,光电转换效率会受到影响,输出功率有所降低。本报告年衰减率根据《光伏制造行业规范条件(2021年本)》计算,晶硅组件衰减率首年不高于2.5%,后续每年不高于0.6%。

.replace替换其他数据:

javascript 复制代码
proposalString = proposalString.replace(new RegExp('<p data-we-empty-p="" style="padding-left:2em;">', 'g'), paragraph);

'g'是全局替换,不然只会替换第一个。

富文本转对象大致实现思路:

因为要数据对应,以下是后端传过来的数据:

javascript 复制代码
          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: [],
                    },
                },
            ];

对应回显在富文本,

思路:遍历数据结构,加上标签,富文本本身是会回显标签的

javascript 复制代码
                         this.$nextTick(() => {
                            let content = '';
                            this.chapterList.chapterContent.forEach(item => {
                                if (item.content) {
                                    content += item.content
                                        .replace(/\n\n\n/g, '<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;')
                                        .replace(/\n\n/g, '<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
                                    content = content.replace(/\n/g, `<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`);
                                }
                                // 图片回显
                                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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`;
                                }
                                // 表格回显
                                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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`, ``)
                                .replace(new RegExp('°E。'), `°E。<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`)}</div>`;
                            this.editor.txt.html(content);
                        });

用户编辑完成后保存,富文本转对象操作思路:特定标签用replace()替换后,split()成数组,这样obj就拿到了,然后遍历,分开处理content文字,图片,以及图片标题,表格以及表格标题。

javascript 复制代码
        // 保存
        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 = '<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">光伏组件在运行过程中,光电转换效率会受到影响,输出功率有所降低。本报告年衰减率根据《光伏制造行业规范条件(2021年本)》计算,晶硅组件衰减率首年不高于2.5%,后续每年不高于0.6%,25年内不。本项目运营期内逐年上网电量见下表。<div class="table" style="width:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;"><span>表6-1  本项目运营期逐年上网电量统计表</span></div><table border="0" width="100%" cellpadding="0" cellspacing="0"><tbody><tr><th>年份</th><th>年发电量万kWh</th><th>累计发电量万kWh</th><th>年利用小时数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>&nbsp; &nbsp; &nbsp; &nbsp;</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 = {};
                // 处理图片数据
                if (this.extractString(item, 'src="', '"').length > 0) {
                    image.path = this.extractString(item, 'src="', '"');
                    if (item.includes('<span class="img-title">')) {
                        // 图片标题
                        image.title = this.extractString(item, '<span class="img-title">', '</span>');
                        item = item.replace(this.extractString(item, '<img', '</span>'), '');
                    } else {
                        // 编辑图片标题(居中)
                        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 = '';
                }
                // 处理表格数据
                if (item.indexOf('tbody><tr><th>') > -1) {
                    let tableData = this.extractString(item, '<table', '</table>');
                    let tableHeadArr = []; // 截取的要处理的数据
                    let head = []; // 表头
                    let contentList = []; // 表格内容
                    // 获取表头
                    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>'));
                        }
                    });
                    // 获取表格内容
                    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
                }
                // 段落文字处理(去除图片、表格数据、标签、占位符等)
                content = item.replace(new RegExp('<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;', 'g'), '\n').replace(/<[^>]+>/g, '');
                proposalArr.push({ content: content, image: image, table: table });
            });
            console.log(proposalArr);
        },

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

相关推荐
Tanecious.1 小时前
机器视觉--python基础语法
开发语言·python
叠叠乐1 小时前
rust Send Sync 以及对象安全和对象不安全
开发语言·安全·rust
careybobo1 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)2 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
Tttian6222 小时前
Python办公自动化(3)对Excel的操作
开发语言·python·excel
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
独好紫罗兰4 小时前
洛谷题单2-P5713 【深基3.例5】洛谷团队系统-python-流程图重构
开发语言·python·算法
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5