本章主要内容是完善index.js逻辑功能。
1，修改index.html，直接copy
html和css文件直接从源码中拷贝：
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>问卷设计工具</title> <link rel="stylesheet" href="./index.css" /> </head> <body class="wrapper"> <div class="row"> <div class="form"> <div class="row"> 问卷ID：<br /> <input id="qid" type="text" value="1" /> </div> <div class="row"> 问卷名称：<br /> <input id="qname" type="text" value="测试问卷" /> </div> <div class="row"> 问卷题目：<br /> <textarea name="" id="text" cols="60" rows="20"> 1. 题目1 选项1 选项2 选项3 2.题目2[多选题] 选项4 选项5 选项6 3.单行文本题 </textarea> </div> <div class="row"> <button id="btn">生成问卷</button> </div> <div class="row"> JSON结果：<br /> <pre class="json-preview" id="json-preview"></pre> </div> <div class="row"> <button id="copy">拷贝JSON内容</button> </div> </div> <div class="result"> <div class="row"> 问卷预览：<br /> <div class="html-preview" id="html-preview"></div> </div> </div> </div> <div class="footer"> 「Powered by <a href="https://webify.cloudbase.net/">CloudBase Webify</a>」 </div> <script type="module" src="./index.js"></script> </body> </html>
css
.form { float: left; min-height: 300px; padding: 20px; } .row { clear: both; margin: 5px 0; } .row::after { content: ""; display: table; clear: both; } .result { float: left; margin-left: 20px; } .question-wrap { padding: 20px; } .question-wrap:hover { background-color: #f5f5f5; } .label { display: block; margin: 5px; } .html-preview { width: 500px; box-sizing: border-box; padding: 20px; border: solid 1px #ccc; } .json-preview { width: 500px; height: 100px; border: solid 1px #ccc; overflow: scroll; }
html结构说明：
从上到下：问卷id（输入框），问卷名称（输入框），问卷题目（文本框 存放对象数据），生成问卷（button按钮），JSON结果（文本框），拷贝JSON内容（button按钮）。
其中，用户点击 生成问卷（button按钮），右边生成一个问卷游览；并且把这套问卷的json题目展示到JSON结果文本框中，用户点击 拷贝JSON内容（button按钮），可以将JSON结果文本框中的内容拷贝到剪切板，方便粘贴到其他使用。
2，运行index后，界面如下图
3，在index.js中添加“生成问卷” button按钮的点击事件：
从text富文本中拿到内容并把用户输入的内容打印输出
document.getElementById("btn").addEventListener("click", function () { // 用户输入的字符串 let text = document.getElementById("text").value; console.log(text); })
打印输出结果如下：
对打印输出的富文本内容进行修改
4，按空行分割题目，生成数组并打印输出：
利用正则表达式，使用string.split方法，里面传一个正则表达式，将字符串进行空行分割。
没有文字内容，只有空内容。
//正则表达式 除了空白和换行，其他什么都没有，就是一个空行 const regexQuestionSplit = /\n\s*\n/gm; document.getElementById("btn").addEventListener("click", function () { // 用户输入的字符串 let text = document.getElementById("text").value; console.log(text); // 按空行分割题目 let questionArr = text.split(regexQuestionSplit); console.log(questionArr); })
分割的输出数组结果：
开始对每个题目进行处理，分割每一行
let questions = []; // 开始对每个题目进行处理 questionArr.forEach((q) => { // 分割每一行 let rows = q.split(regexQuestionRowSplit); //console.log(JSON.stringify(rows)); // 去掉空行 rows = rows.filter((item) => item.trim() !== ""); // console.log(JSON.stringify(rows)); // 全部去掉前后空格 rows = rows.reduce((acc, cur) => { return [...acc, cur.trim()]; }, []); console.log(JSON.stringify(rows)); })
输出结果如下：
5，对填空题，单选题和多选题分别利用正则表达式来处理：
import { prettyPrintJson } from "pretty-print-json"; import copy from "copy-to-clipboard"; import gotpl from "gotpl"; const regexQuestionSplit = /\n\s*\n/gm; const regexQuestionRowSplit = /\n/gm; const regexTitle1 = /(?<index>\d+)[.、][\s]*(?<title>[^\n]*)$/; const retexTitle2 = /(?<index>\d+)[.、][\s]*(?<title>[^\[【]*)[\[【](?<type>\W+)[\]】]$/; let resultObj = { id: 0, name: "", questions: [], }; let resultJson = ""; const tpl = ` <div class="question"> <div class="row"> 问卷ID：<%= id %> </div> <div class="row"> 问卷名称：<%= name %> </div> <% for(var i=0, l=questions.length; i<l; ++i){ %> <% var item = questions[i]; %> <div class="question-wrap"> <div class="question-title"><%= item.id %>. <%= item.title %>【<%=item.question_type_text %>】</div> <% if(item.question_type === 'input'){ %> <div class="input"> <input type="text" name="<%= item.id %>" /> </div> <% }else if(item.question_type === 'radio'){ %> <div class="radio"> <% for(var j=0, k=item.options.length; j<k; ++j){ %> <label class="label"> <input type="radio" name="<%= item.id %>" value="<%= item.options[j].option_id %>" /> <%= item.options[j].option_id %>. <%= item.options[j].option_value %> </label> <% } %> </div> <% }else if(item.question_type === 'checkbox'){ %> <div class="checkbox"> <% for(var j=0, k=item.options.length; j<k; ++j){ %> <label class="label"> <input type="checkbox" name="<%= item.id %>" value="<%= item.options[j].option_id %>" /> <%= item.options[j].option_id %>. <%= item.options[j].option_value %> </label> <% } %> </div> <% } %> </div> <% } %> </div> `; const alphabet = [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", ]; const type_map = { 填空题: "input", 单选题: "radio", 多选题: "checkbox", }; function getQuestionType(questionType) { return type_map[questionType] || "类型错误"; } function formatQuestion(index, title, typeText, options = null) { // console.log(index, title, questionType); const questionType = getQuestionType(typeText); let question = { id: +index, title: title, question_type: questionType, question_type_text: typeText, }; // console.log(options); if (options && options.length) { let tmpOptions = []; options.forEach((item, index) => { tmpOptions.push({ option_id: alphabet[index], option_value: item, }); }); question.options = tmpOptions; } return question; } document.getElementById("btn").addEventListener("click", function () { resultObj.id = +document.getElementById("qid").value.trim(); resultObj.name = document.getElementById("qname").value.trim(); // 用户输入的字符串 let text = document.getElementById("text").value; // console.log(text); // 按空行分割题目 let questionArr = text.split(regexQuestionSplit); // console.log(questionArr); let questions = []; // 开始对每个题目进行处理 questionArr.forEach((q) => { // 分割每一行 let rows = q.split(regexQuestionRowSplit); // console.log(JSON.stringify(rows)); // 去掉空行 rows = rows.filter((item) => item.trim() !== ""); // console.log(JSON.stringify(rows)); // 全部去掉前后空格 rows = rows.reduce((acc, cur) => { return [...acc, cur.trim()]; }, []); // console.log(JSON.stringify(rows)); // 如果是单行，是填空题 if (rows.length === 1) { if (regexTitle1.test(rows[0])) { let matches = rows[0].match(regexTitle1); // console.log(matches); let { index, title } = matches.groups; questions.push(formatQuestion(index, title, "填空题")); } } // console.log(questions); // 多行，可能是单选或多选 if (rows.length > 1) { // 第一行是标题，其他行是选项 let [titleRow, ...options] = rows; // console.log("titleRow", titleRow); // console.log("options", options); // 先验证带题目类型的格式 if (retexTitle2.test(titleRow)) { let matches = titleRow.match(retexTitle2); // console.log(matches) let { index, title, type } = matches.groups; questions.push(formatQuestion(index, title, type, options)); } else if (regexTitle1.test(titleRow)) { // 没有设置类型的，当成单选题 let matches = titleRow.match(regexTitle1); let { index, title } = matches.groups; console.log(index, title, options); questions.push(formatQuestion(index, title, "单选题", options)); } // console.log(questions); } }); resultObj.questions = questions; resultJson = JSON.stringify(resultObj); console.log(resultObj); document.getElementById("json-preview").innerHTML = prettyPrintJson.toHtml(resultObj); document.getElementById("html-preview").innerHTML = gotpl.render( tpl, resultObj ); }); document.getElementById("copy").onclick = () => { copy(resultJson); alert("已复制到剪贴板"); };
6，输出最终结果：
输出的json数据如下：
[ { "id": 1, "title": "题目1", "question_type": "radio", "question_type_text": "单选题", "options": [ { "option_id": "A", "option_value": "选项1" }, { "option_id": "B", "option_value": "选项2" }, { "option_id": "C", "option_value": "选项3" } ] }, { "id": 2, "title": "题目2", "question_type": "checkbox", "question_type_text": "多选题", "options": [ { "option_id": "A", "option_value": "选项4" }, { "option_id": "B", "option_value": "选项5" }, { "option_id": "C", "option_value": "选项6" } ] }, { "id": 3, "title": "单行文本题", "question_type": "input", "question_type_text": "填空题" }, { "id": 4, "title": "题目2", "question_type": "checkbox", "question_type_text": "多选题", "options": [ { "option_id": "A", "option_value": "选项4" }, { "option_id": "B", "option_value": "选项5" }, { "option_id": "C", "option_value": "选项6" } ] } ]
