5
讀取文件時，沒有得到任何比賽，我設計了這個正則表達式與一些在線工具，並在社會各界的幫助：有效的正則表達式根據在線測試工具，在瀏覽器
https://regex101.com/r/hJ4pD5/1
(\s[A-Z]\.).+?(?=(\s[A-Z]\.)|(\W?(Answer:)\W?))
的目標是提取問題的所有替代方案。據regexr和regex101這是一個有效的JavaScript正則表達式這與test data(pastebin)效果很好：
1. Question goes here:
A. Answer one
B. Answer two
C. Answer three D. Not indented Answer
Answer: B is correct
預計比賽應該是：
「A回答一個」， 「B答二」， 「C.答案三」， 「D.未縮進的答案」
但是，當我在代碼中執行它時，表現不佳，沒有找到匹配項。
（與引擎收錄數據試試看）
/**
* Created by Schwusch on 01/08/2016.
*/
$(document).ready(start);
var questionsRaw;
var questionsFormatted = [];
var questionIndex = 0;
function readSingleFile(e) {
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
displayContents(contents);
};
reader.readAsText(file);
}
/* REGEX MAGIC -------------------------------------------------*/
function displayContents(contents) {
questionsRaw = contents.split('---');
$.each(questionsRaw, function(index, question) {
var answer = question.split("Answer:")[1];
var splittedQuestion = question.split("A.")[0];
var alternatives = question.match(/(\s[A-Z]\.).+?(?=(\s[A-Z]\.)|(\W?(Answer:)\W?))/g);
questionsFormatted.push({
question: splittedQuestion,
alternatives: alternatives,
answer: answer
});
});
/* END REGEX MAGIC -------------------------------------------------*/
var element = document.getElementById('file-content');
element.innerHTML = questionsFormatted[questionIndex].question;
for (var i = 0; i < questionsFormatted[questionIndex].alternatives.length ; i++) {
$('#alternatives').append('<button type="button" class="list-group-item">' + questionsFormatted[questionIndex].alternatives[i] + '</button>');
}
}
function start() {
document.getElementById('file-input')
.addEventListener('change', readSingleFile, false);
$(window).keydown(function(e) {
e = e || event;
switch(e.keyCode) {
case 37: // left
previousQuestion();
return false;
case 38: // up
showQuestion();
return false;
case 39: // right
nextQuestion();
return false;
case 40: // down
showAnswer();
return false;
}
});
$(document).on('change', ':file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$(':file').on('fileselect', function(event, numFiles, label) {
var element = document.getElementById('filechoose');
element.innerHTML = label;
});
}
function showAnswer() {
var element = document.getElementById('file-content');
element.innerHTML = questionsFormatted[questionIndex].answer;
}
function showQuestion() {
var element = document.getElementById('file-content');
element.innerHTML = questionsFormatted[questionIndex].question;
}
function nextQuestion() {
if (questionIndex < questionsFormatted.length - 1) questionIndex++ ;
else questionIndex = 0;
var element = document.getElementById('file-content');
element.innerHTML = questionsFormatted[questionIndex].question;
$(".list-group-item").remove();
for (var i = 0; i < questionsFormatted[questionIndex].alternatives.length ; i++) {
$('#alternatives').append('<button type="button" class="list-group-item">' + questionsFormatted[questionIndex].alternatives[i] + '</button>');
}
}
function previousQuestion() {
if (questionIndex > 0) questionIndex-- ;
else questionIndex = questionsFormatted.length - 1;
var element = document.getElementById('file-content');
element.innerHTML = questionsFormatted[questionIndex].question;
$(".list-group-item").remove();
for (var i = 0; i < questionsFormatted[questionIndex].alternatives.length ; i++) {
$('#alternatives').append('<button type="button" class="list-group-item">' + questionsFormatted[questionIndex].alternatives[i] + '</button>');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Question tool</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="script.js"></script>
<style>
/* Move down content */
body {
padding-top: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div>
<div class="container">
<div class="jumbotron">
<h3>Question Tool</h3>
<label class="btn btn-default btn-file" id="filechoose">
Choose File
<input type="file" id="file-input" style="display: none;"/>
</label>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-lg btn-primary" onclick="showAnswer()" role="button">
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>Show Answer
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-lg btn-success" onclick="showQuestion()" role="button">
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>Show Question
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-lg btn-danger" onclick="previousQuestion()" role="button">
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>Previous Question
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-lg btn-info" onclick="nextQuestion()" role="button">
<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>Next Question
</button>
</div>
</div>
<div id="file-content" class="well"></div>
<div id="alternatives" class="list-group">
</div>
</div>
</div>
</div>
</body>
</html>
爲什麼在網上測試工作，但不是在一個瀏覽器？
我不能讓你的代碼片段運行，因爲其他問題，但正則表達式在我的瀏覽器的控制檯工作正常（雖然每個比賽需要修剪空白） – moopet
標題沒有正確公式化，正則表達式是有效的但沒有得到任何匹配。無論如何，謝謝你的努力。 – Schwusch