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

JavaScript
1

Tell us what’s happening:

I’m at the point where the only tests failing are 48-50, and I’m getting brain block really bad with this lol.

It’s to the point that I even tried putting this all on vscode and seeing if copilot could help me better understand how to solve this, but haven’t had any success with its suggestions.

Could I get a point in the right direction?

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">
</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..."></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>
<script src="script.js"></script>
</html>

/* file: styles.css */
* {
     box-sizing: border-box;
}
 body {
     font-family: Arial, sans-serif;
     padding: 20px;
}
 #markdown-input {
     width: 100%;
     height: 100px;
}
 #html-output, #preview {
     height: 100px;
     display: inline-block;
     width: 100%;
     border: 1px solid #ccc;
     padding: 10px;
     margin: auto;
     white-space: pre-wrap;
     background-color: #f9f9f9;
}
 @media (min-width: 600px) {
     #markdown-input, #html-output, #preview {
         height: 200px;
         margin: 0;
    }
     #container {
         display: flex;
         justify-content: space-evenly;
         gap: 10px;
    }
}

/* file: script.js */

//Assign elements

let textInput = document.querySelector("#markdown-input");
let rawOutput = document.querySelector("#html-output");
let htmlPreview = document.querySelector("#preview");

//Regexes
  let heading1Regex = /^\s?(?<!#)#(?!#)\s+([^\r\n#]+)/gm;

  let heading2Regex = /^\s?(?<!#)##(?!#)\s+([^\r\n#]+)/gm;

  let heading3Regex = /^\s?(?<!#)###(?!#)\s+([^\r\n#]+)/gm;

  let boldRegex = /(?<!\*)\*\*(?!\*)([^*]+?)(?<!\*)\*\*(?!\*)|(?<!_)__(?!_)([^*]+?)(?<!_)__(?!_)/gm;

  let italicRegex = /(?<!\*)\*(?!\*)([^*]+?)(?<!\*)\*(?!\*)|(?<!_)_(?!_)([^*]+?)(?<!_)_(?!_)/gm;

  let imgRegex = /!\[([^\]]+)\]\(([^\)]+)\)/gm;

  let linkRegex = /\[([^\]]+)\]\(([^\)]+)\)/gm;

  let blockQuote = /^\s?>\s(.+)/gm;

function convertMarkdown() {

  let textContent = textInput.value;
  let textConvert = textContent
    .replace(heading1Regex, "<h1>$1</h1>")
    .replace(heading2Regex, "<h2>$1</h2>")
    .replace(heading3Regex, "<h3>$1</h3>")
    .replace(blockQuote, "<blockquote>$1</blockquote>")
    .replace(boldRegex, (match, g1, g2) => {
  return `<strong>${g1 || g2}</strong>`;
})
    .replace(italicRegex, (match, g1, g2) => {
  return `<em>${g1 || g2}</em>`;
})
    .replace(imgRegex, '<img alt="$1" src="$2">')
    .replace(linkRegex, '<a href="$2">$1</a>');
  return textConvert;
};

textInput.addEventListener("input", () => {
  rawOutput.innerText = convertMarkdown();
  htmlPreview.innerHTML = convertMarkdown();
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

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

2

did you check what your app is doing in those situations?

3

yeah, I’m just having a hard time figuring out if the issue is with my italics regex, my bold regex, or the blockquote regex, because blockquote combined with italics seems to work fine, blockquote combined with bold seems to work fine, but with all three together i’m just having a really hard time figuring out how to work with the triple asterisks.

I’ve asked my friend who works with javascript and regex professionally and even he’s having a hard time solving that mental puzzle, and that combined with vscode copilot being stumped makes me feel kind of hopeless about solving this at a regex-beginner level.

It would maybe help a little if regex101.com were a little bit more versatile for testing multiple regex variables at the same time, but as it stands I’m just completely stumped about how to work out the combined matching for all three cases.

4

in both the italic and bold regex you have a negative lookahead and a negative lookbehind, they are never going to match asterisks that are nearby other asterisks, which is what happens with the sentence there

they do not match in regex101, you can use that to find how to make them match

image
image644×199 10.8 KB

image
image574×213 10.6 KB

5

alright, I’m going to try another rewrite of the bold and italic regex. Do you think it might be better to have two separate variables for the asterisk and underscore versions rather than trying to combine them into one regex with the pipe?

6

there is no issue using the pipe to merge two regexes, but you have a similar issue with the underscores, they are not going to work for for example ___italbold___ (three underscores)

7

alright, thank you! I’ll report back after some more experimenting.

8

Okay, rewrote it and yep, I was massively overthinking the regex. I’m not completely sure why, in the time between me writing the old code last night and coming back to it today I had completely forgotten my reasoning behind inserting lookaheads and lookbehinds.

Anyway, I appreciate the help. All I can really say is brain block sucks, and regex is wild to get used to as a complete beginner lol.