Crie um sandbox de expressões regulares

Instruções

Crie um sandbox de expressões regulares

Para este laboratório, você começa com o CSS e o HTML já escritos para você. Você usará JavaScript para habilitar a sandbox de regex a fim de testar uma expressão regular contra uma string e destacar os resultados. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve acessar os elementos #pattern, #test-string, #test-btn e #result e salvá-los nas variáveis regexPattern, stringToTest, testButton e testResult, respectivamente. 1. Você deve acessar as caixas de seleção de flag #i e #g e salvá-las nas variáveis caseInsensitiveFlag e globalFlag, respectivamente. 1. Você deve ter uma função chamada getFlags que retorna uma string contendo as flags das caixas de seleção de flags marcadas, ou uma string vazia se nenhuma delas estiver marcada. 1. Quando você clicar no botão testButton, se o padrão regex corresponder à string de teste, o texto correspondente deve ser destacado. Para destacar as correspondências, substitua cada correspondência pelo mesmo texto envolvido por um elemento span com a classe highlight. Observe que o CSS para isso já foi adicionado para você. 1. Quando houver uma correspondência, o texto correspondente deve ser exibido dentro de #result. Em caso de múltiplas correspondências, cada texto correspondente deve ser separado do próximo por uma vírgula e um espaço. 1. Quando não houver correspondência, o texto no match deve ser exibido dentro de #result.

O que fazer:

Testes:

Você deve acessar o elemento `#pattern` e salvá-lo na variável `regexPattern`.
Você deve acessar o elemento `#test-string` e salvá-lo na variável `stringToTest`.
Você deve acessar o elemento `#test-btn` e salvá-lo na variável `testButton`.
Você deve acessar o elemento `#result` e salvá-lo na variável `testResult`.
Você deve acessar a caixa de seleção da flag `#i` e salvá-la em `caseInsensitiveFlag`.
Você deve acessar a caixa de seleção da flag `#g` e salvá-la na variável `globalFlag`.
Você deve ter uma função `getFlags`.
A função `getFlags` deve retornar `"i"` se a caixa de seleção `#i` estiver marcada.
A função `getFlags` deve retornar `"g"` se a caixa de seleção `#g` estiver marcada.
A função `getFlags` deve retornar `"ig"` ou `"gi"` se ambas as caixas de seleção estiverem marcadas.
A função `getFlags` deve retornar uma string vazia se ambas as caixas de seleção não estiverem marcadas.
Quando o HTML interno de `stringToTest` é `Gu1n34 P1g5`, o valor de `regexPattern` é `\d+`, e nenhuma flag está marcada, `stringToTest.innerHTML` deve se tornar `Gu1n34 P1g5` ao clicar no botão `testButton`.
Quando o HTML interno de `stringToTest` é `Gu1n34 P1g5`, o valor de `regexPattern` é `\d+`, e a flag global está marcada, `stringToTest.innerHTML` deve se tornar `Gu1n34 P1g5` ao clicar no botão `testButton`.
Quando o HTML interno de `stringToTest` é `Gu1n34 P1g5`, o valor de `regexPattern` é `G`, e ambas as flags global e case insensitive estão marcadas, `stringToTest.innerHTML` deve se tornar `Gu1n34 P1g5` ao clicar no botão `testButton`.
Quando você clicar no botão `testButton`, se o padrão regex corresponder à string de teste, o texto correspondente deve ser envolvido por um elemento `span` com a classe `highlight`.
Quando não houver correspondência, a string de teste não deve ser modificada.
Quando o HTML interno de `stringToTest` é `Gu1n34 P1g5`, o valor de `regexPattern` é `\d+`, e nenhuma flag está marcada, o texto interno de `#result` deve se tornar `1` ao clicar no botão `testButton`.
Quando o HTML interno de `stringToTest` é `Gu1n34 P1g5`, o valor de `regexPattern` é `\d+`, e a flag global está marcada, o texto interno de `#result` deve se tornar `1, 34, 1, 5` ao clicar no botão `testButton`.
Quando houver uma correspondência, o texto correspondente deve ser exibido dentro de `#result`.
Quando não houver correspondência, o texto `no match` deve ser exibido dentro de `#result`.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Regex Sandbox</title>

</head>

<body>
    <h1>Regex Sandbox</h1>
    <main>
        <div id="regex-container">
            <label for="pattern">Regex Pattern:
                <div id="pattern-container">/<input type="text" id="pattern" name="pattern"
                        placeholder="Enter your regex pattern">/</div>
            </label>
            <div id="flags-container">
                <p>Flags: </p>
                <label for="i">
                    <input type="checkbox" name="flags" id="i"> i
                </label>
                <label for="g">
                    <input type="checkbox" name="flags" id="g"> g
                </label>
            </div>
        </div>
        <div id="test-container">
            <p>Test String:</p>
            <div id="test-string" placeholder="Enter your test string" contenteditable="true"></div>
        </div>
        <button class="btn" id="test-btn" type="button">Test Regex</button>
        <div id="result-container">
            <h2>Result:</h2>
            <p id="result">
            </p>
        </div>

    </main>
    <script src="script.js"></script>
</body>

</html>

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --dark-grey: #1b1b32;
    --light-grey: #f5f6f7;
    --golden-yellow: #fecc4c;
    --yellow: #ffcc4c;
    --gold: #feac32;
    --orange: #ffac33;
    --dark-orange: #f89808;
    --border: 0.2rem solid darkgrey;
    --padding: 0.3rem;
}

body {
    background-color: var(--dark-grey);
    color: var(--light-grey);
    font-size: 20px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    padding: 5px;
}

h1 {
    margin: 5rem auto 2rem;
    text-align: center;
}

p {
    padding: var(--padding);
}

#regex-container {
    max-width: 680px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--border);
}

#regex-container>label {
    padding: var(--padding);
    flex: 1 1 auto;
}

#pattern-container {
    display: inline-block;
    color: var(--dark-grey);
    background-color: var(--light-grey);
    margin: 5px;
    border: var(--border);
}

#pattern {
    margin: 0.2rem;
    border: 0;
    font-size: 1rem;
    width: calc(100% - 1.2rem);
}

#pattern:focus {
    outline: none;
}

#flags-container {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

#flags-container>label {
    padding: var(--padding);
    margin-right: 0.3rem;
}

#test-container {
    max-width: 680px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    border: var(--border);
}

#test-string {
    background-color: var(--light-grey);
    min-height: 5rem;
    color: var(--dark-grey);
    border-top: var(--border);
    font-size: 1.2rem;
}

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    pointer-events: none;
    color: var(--dark-grey);
}

::placeholder {
    color: var(--dark-grey);
}


button {
    display: block;
    cursor: pointer;
    width: 8rem;
    margin: 0.2rem auto;
    color: var(--dark-grey);
    background-color: var(--gold);
    background-image: linear-gradient(var(--golden-yellow), var(--orange));
    border-color: var(--gold);
    border-width: 0.2rem;
    font-size: 1.1rem;
}

.btn:hover {
    background-image: linear-gradient(var(--yellow), var(--dark-orange));
}

#result-container {
    max-width: 680px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

h2 {
    align-self: flex-start;
    margin: 0.4rem 0.2rem 0.2rem;
    flex: 0 1 auto;
}

#result {
    color: var(--dark-grey);
    background-color: var(--light-grey);
    font-size: 1.5rem;
    flex: 1 1 auto;
    margin: 0.2rem;
    border: var(--border);
    min-height: 3rem;
}

.highlight {
    background-color: lightgreen;
}

Preview