Question

我已经使用多种在线工具并在社区的帮助下设计了这个正则表达式：

(\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

预期比赛应为：

＆＃34; A。回答一个＆＃34;，＆＃34;乙。回答两个＆＃34;，＆＃34℃。回答三＆＃34;，＆＃34; d。没有缩进答案＆＃34;

但是当我在代码中实现它时，它执行得不是很好，没有找到匹配项。

（尝试使用pastebin数据）

/**
 * 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>

为什么它在在线测试人员中工作但在浏览器中却没有？

Answer 1

它不适合您的原因是，与您在regex101.com上测试时使用的文本相反，您加载的文件使用\r\n作为换行符而不仅仅是{{1} }。

除此之外，默认情况下\n元字符与.不匹配，并且JavaScript不支持可能会改变此行为的\r修饰符，您会得到更少或没有完全匹配。

更具体地说：在正则表达式中，部分s会在遇到.+?时停止匹配字符。首先它是这样做的，因为它向前看，发现它可以与\r匹配\r或\s，但下一个\W与\n不匹配} [A-Z]的{{1}}。因此它会回溯并尝试继续使用A部分，但这也会失败，因为Answer:无法与上面解释的那样匹配。因此，匹配过程然后再次从正则表达式的开头开始，以找到潜在的下一个匹配。由于同样的原因，这一次又一次失败。

要解决此问题，请更改两件事：

在.+?后面添加\r，因此它不仅会匹配+，还会匹配前面的\s。
将\n更改为\r，同样，它也可以匹配前面的\W?。

这应该有效：

\W*

虽然这解决了，但我还建议将此正则表达式进一步简化为：

\r

值得注意的是，最后的/(\s[A-Z]\.).+?(?=(\s+[A-Z]\.)|(\W*(Answer:)\W?))/g没有意义：它与/\s[A-Z]\..+?(?=\s+[A-Z]\.|\W*Answer:)/g匹配或不匹配，在这两种情况下都接受它。

根据在线测试工具有效的RegEx，在浏览器中读取文件时没有获得任何匹配

1 个答案: