Build a Markdown to HTML Converter - Build a Markdown to HTML Converter

JavaScript
1

Tell us what’s happening:

I’m failing tests 5, 10, 15 and 47 but it seems to work as intended. for example if I input “some text # title 1” it doesn’t convert “#title 1” to h1. It passes every other test

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown to HTML Converter</title>
    <link rel="stylesheet" href="styles.css">
    <script src="./script.js"></script>
</head>

<body>
    <h1>Markdown to HTML Converter</h1>
    <div id="container">
        <div class="container">
            <h2>Markdown Input:</h2>
            <textarea id="markdown-input" placeholder="Enter your markdown here..." oninput="convertMarkdown(); updateRawOutput(); updatePreview()"></textarea>
        </div>
        <div class="container">
            <h2>Raw HTML Output:</h2>
            <div id="html-output"></div>
        </div>
        <div class="container">
            <h2>HTML Preview:</h2>
            <div id="preview"></div>
        </div>
    </div>
</body>

</html>

/* file: styles.css */


/* file: script.js */

let output = ""
function convertMarkdown() {
    output = ""
    const input = document.getElementById("markdown-input").value

    let inputLines = input.split("\n")
    let outputLines = []
    const mdh1regex = /^\s*#{1}\s+/
    const mdh2regex = /^\s*#{2}\s+/
    const mdh3regex = /^\s*#{3}\s+/
    const mdh4regex = /^\s*#{4}\s+/
    const mdh5regex = /^\s*#{5}\s+/
    const mdh6regex = /^\s*#{6}\s+/

    const strongRegex = /[*_]{2}[a-zA-Z0-9\s*_]*[*_]{2}/
    const italicRegex = /[*_]{1}[a-zA-Z0-9\s]*[*_]{1}/
    const imgRegex = /!\[[\w\s\.-]*\]\([\w\/.\s"-]+\)/
    const linkRegex = /\[[\w\/.\s]*\]\([\w\/.]*\)/
    const quoteRegex = /^>\s[*]*[\s\w]+[*]*/

    inputLines.forEach(inputLine => {
        let c=0
        var outputLine = ""

        if(quoteRegex.test(inputLine)){
            outputLine = `<blockquote>${inputLine.replaceAll("> ", '')}</blockquote>`
            inputLine = outputLine
            console.log(outputLine)
            c++
        }
        if (mdh6regex.test(inputLine)) {
            outputLine = `<h6>${inputLine.replace(/\s*#*\s*/, "")}</h6>`
            inputLine = outputLine
            c++;
        }
        else if (mdh5regex.test(inputLine)) {
            outputLine = `<h5>${inputLine.replace(/\s*#*\s*/, "")}</h5>`
            inputLine = outputLine
            c++;
        }
        else if (mdh4regex.test(inputLine)) {
            outputLine = `<h4>${inputLine.replace(/\s*#*\s*/, "")}</h4>`
            inputLine = outputLine
            c++;
        }
        else if (mdh3regex.test(inputLine)) {
            outputLine = `<h3>${inputLine.replace(/\s*#*\s*/, "")}</h3>`
            inputLine = outputLine
            c++
        }
        else if (mdh2regex.test(inputLine)) {
            outputLine = `<h2>${inputLine.replace(/\s*#*\s*/, "")}</h2>`
            inputLine = outputLine
            c++
        }
        else if (mdh1regex.test(inputLine)) {
            outputLine = `<h1>${inputLine.replace(/\s*#*\s*/, "")}</h1>`
            inputLine = outputLine
            c++
        }
        if (strongRegex.test(inputLine)){
            console.log(inputLine)
            outputLine = ""
            let splittedOutputLine = inputLine.split(/(?=[*_]{2}[a-zA-Z0-9\s*_]*[*_]{2})/gm)
            console.log(splittedOutputLine)
            splittedOutputLine.forEach(line => {
            if (strongRegex.test(line)){
                outputLine += `<strong>${line.replaceAll(/[_*]{2}/gm, "")}</strong>`
            }
            else{
                outputLine += line
            }
            });
            inputLine = outputLine
            c++
        }
        if (italicRegex.test(inputLine)){
            outputLine = ""
            let splittedOutputLine = inputLine.split(/([_*]{1}[[a-zA-Z0-9\s]+[_*]{1})/g)
            splittedOutputLine.forEach(line => {
            if (italicRegex.test(line)){
                outputLine += `<em>${line.replaceAll(/[_*]{1}/g, "")}</em>`
            }
            else{
                outputLine += line
            }
            });
            inputLine = outputLine
            c++
        }
        if(imgRegex.test(inputLine)){
            outputLine = `<img alt="${inputLine.split("]")[0].replace("![", '')}" src="${inputLine.split("(")[1].replaceAll(")", '')}">`
            inputLine = outputLine
            c++
        }
        if(linkRegex.test(inputLine)){
            outputLine = `<a href="${inputLine.split("]")[1].replaceAll(/[\(\)]/g, '')}">${inputLine.split("(")[0].replaceAll(/[\[\]]/g, '')}</a>`
            inputLine = outputLine
            c++
        }

        if(c==0) {
            outputLine = inputLine
        }
        outputLines.push(outputLine)
    });

    outputLines.forEach(outputLine => {
        output+=outputLine+"\n"
    });
    return output
}

function updateRawOutput(){
    const rawOutput = document.getElementById("html-output")
    rawOutput.innerHTML = output.replaceAll("<", "&lt").replaceAll(">, &gt")
}

function updatePreview(){
    const prev = document.getElementById("preview")
    prev.innerHTML = output
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build a Markdown to HTML Converter - Build a Markdown to HTML Converter

2

If you open browser’s console (not the one that’s visible on page), there will be some details regarding failing tests.

1 Like