批量添加题目功能(正则表达式的使用案例)

时间:2021-1-18 作者:admin

问题描述

根据业务需求,需要有一个批量添加题目的功能。

如上图所示,左边是纯文本输入的题目,右边需要解析成一个个对应的题目。

右边的题目就是一个组件,根据不同的类型进行显示,这个组件这里不做谈论。这里要做的就是根据左边的文本内容,解析成一个个对象的形式,传入右边的组件进行渲染。

这篇文章,就是如何把左边的纯文本,解析成一个个的对象,这就考验文本的拆分能力了。

指定拆分规则

第一步当然是指定规则,不然没法知道以什么的方式进行解析。

这里为了方便处理,对每个题目类型的格式加以限定,每个题目之间也用空行进行分隔。

1、每个题目之间必须以空行分割,题干中间不得换行。
2、所有题型必须含有 “答案:”字段,且不能为空。
3、【选择题】最多支持10个选项A,B,C,D,E,F,G,H,I,J,且必须按顺序输入。
4、【选择题】选项号A-H与内容之间必须用 ”、“ 或 ”.“ 分隔开。
5、【选择题】答案中不能加空格。
6、【判断题】答案仅支持 “正确”,“错误” 或者 “对”,“错”。
7、【填空题】每个空使用至少三个短下划线 “___” 作为空的位置。
8、【填空题】多个填空的答案用 “|” 分割。每个填空有多个答案的话用 “&&” 分隔。单个答案不用添加。
9、【填空题】答案如果多于题目中需要填空的个数,多于的答案将被忽略。
10、【问答题】的答案可以为空。
11、【文件上传题】的答案必须为 “[文件]” 。

拆分题目

下一步就是拆分每个题目。

以为核心就是一句正则表达式 /\n\s*\n\s*/g,所以直接上代码:

// 将批量题目分成一个个题目字符串
function getEachSub(whole) {
    let me = this;
    me.previewSubjects = [];

    // 主要就是这句话
    let eachSourceSubs = whole.trim().split(/\n\s*\n\s*/g);
    if(eachSourceSubs.length) {
        eachSourceSubs.forEach(item=>{
            // assembleSub就是把每个题目的字符串转换成题目对象,保存到previewSubjects数组里
            me.previewSubjects.push(me.assembleSub(item.trim()));
        });
    }
}

题目字符串转为对象

题目的类型总共分为:

  • 单选题(radio)
  • 多选题(chk)
  • 判断题(judge)
  • 填空题(fillin)
  • 问答题(textarea)
  • 文件题(file)

每个题目的对象为:

{
    inpttype:'', // 类型
    subject:'', // 题干
    answer: '', // 正确答案
    items:[], // 题目选项(单选,多选,填空使用)
    err:'', // 题目解析有问题时的报错信息
}

解析的思路:

  • 由于每题都必须含有“答案”字段,所以通过答案进行拆分可以得到题干和正确答案内容。
    • 如果匹配到多个“答案”,则报错,因为每个题目只能有一个答案
  • 答案对了,判断题型
    • 如果题目中有A-Z开头的,那么就是单选题或者多选题
      • 如果是单选题或者多选题
        • 把从“答案”开始到末尾所有字符串取到,然后去掉“答案”本身就是这道题目的正确答案。 (如果正确答案长度>1,就是多选题,否则为单选题)
        • 剩下的部分为题干和选项。再通过选项前面的A-Z进行拆分后,数组的第一个就是题干,剩下的就是选项了。
        • 最后,判断答案与选项是否匹配。
      • 否则
        • 通过“答案”拆分后,数组的第一个就是题干
          • 如果题干中包含“___”就是填空题,它的答案选项就是在数组的第二个里面。
          • 如果数组的第二个是“对”“错”“正确”“错误”,它就是判断题,那么数组第一个就是题干了。
          • 如果数组的第二个是“[文件]”,它就是文件题了。
          • 剩下的就是问答题。

具体的代码如下:

// 将一个个题目字符串拆解/组合成题目对象
function assembleSub(eachSub) {
    let me = this;
    let subObj = {
        inpttype:'', // 类型
        subject:'', // 题干
        answer: '', // 正确答案
        items:[], // 题目选项
        err:'' // 错误提示
    };
    let ansArr = eachSub.match(/\n\s*答案[::]/g);

    if(ansArr) {
        if(ansArr.length>1) { // 匹配到多个答案
            subObj.err = '每道题只能有一个答案';
        } else {
            /**
             * 单选题和多选题
             */
            if (eachSub.search(/\n\s*[A-Z][\.、]/ig) > -1) {
                let selReg = /\n\s*答案[::]\s*[A-Z]+/i; // 单选题和多选题

                let selectAns = eachSub.match(selReg);

                if(selectAns) {
                    let ans = selectAns[0].trim().replace(/^答案[::]\s*/g, '').toUpperCase();
                    subObj.answer = ans;
                    // 单选题与多选题
                    subObj.inpttype = ans.length===1 ? 'radio' : 'chk';


                    let sourceTimu = eachSub.replace(selReg,'');
                    // 拆分题干与选项
                    let sourceTimuArr = sourceTimu.split(/[A-Z][、\.]/ig);
                    if(sourceTimuArr.length == 1){
                        subObj.err = '选项不能为空';
                    }else if(sourceTimuArr.length  > 11){
                        subObj.err = '选项数量不能大于10个';
                    }

                    let valArr = [];
                    sourceTimuArr.map((item,i)=>{
                        sourceTimuArr[i] = item.trim().replace(/\s+/g, ' ');

                        if(i===0) {
                            // 题干
                            subObj.subject = sourceTimuArr[i];
                        } else {
                            // 选项
                            let obj = {
                                pic:'',
                                text: sourceTimuArr[i],
                                val: String.fromCharCode(65+i-1) // ascii转字母
                            };
                            subObj.items.push(obj);
                            valArr.push(obj.val);
                        }
                    });

                    // 单选题
                    if(subObj.answer.length === 1) {
                        if(!valArr.includes(subObj.answer)) {
                            subObj.err= '答案选项不正确';
                        }
                    } else { // 多选题
                        for (let a of subObj.answer) {
                            if(!valArr.includes(a)) {
                                subObj.err= '答案选项不正确';
                                break;
                            }
                        }
                    }
                } else {
                    subObj.err = '选择题答案不正确';
                }
            }
            else {
                let reg = /\n\s*答案[::]\s*/g;
                let regArr = eachSub.split(reg);

                subObj.subject = regArr[0];
                /**
                 * 填空题
                 */
                if(regArr[0].includes('___')) {
                    subObj.inpttype = 'fillin';
                    let len = regArr[0].match(/_{3,}/g).length;
                    let fillinAns = regArr[1].split(/\s*\|\s*/g);

                    if(len>0 && len <= fillinAns.length) {
                        for(let i=0; i<len; i++) {
                            if(fillinAns[i].includes('&&')) {
                                subObj.items.push({
                                    matchtype: "equal",
                                    vals: fillinAns[i].split('&&').filter(item=>{return item})
                                });
                            } else {
                                subObj.items.push({
                                    matchtype: "equal",
                                    vals: [fillinAns[i]]
                                });
                            }
                        }
                    } else {
                        subObj.err = '填空题答案个数错误';
                    }
                }
                /**
                 * 判断题
                 */
                else if(regArr[1].trim() === '对'
                    || regArr[1].trim() === '错'
                    || regArr[1].trim() ==='正确'
                    || regArr[1].trim() ==='错误') {
                    subObj.inpttype = 'judge';

                    subObj.answer = (regArr[1].trim() === '对'|| regArr[1].trim() === '正确') ? '1' : '0';
                }
                /**
                 * 文件上传题
                 */
                else if(regArr[1].trim() === '[文件]'){
                    subObj.inpttype = 'file';
                }
                /**
                 * 问答题
                 */
                else {
                    subObj.inpttype = 'textarea';
                    subObj.answer = regArr[1].trim();
                }
            }
        }
    } else { // 未匹配到则为null
        subObj.err = '题目缺少答案'
    }

    return subObj;
}

总结

  • 本文主要考验正则表达式的使用。
  • 遗留问题:左右联动还未实现(左边滚动的时候,右边可以跟着滚动,类似markdown编辑器的效果)。
  • 正则表达式可视化测试地址:https://regexr-cn.com/
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。