Build a Markdown to HTML Converter

JavaScript
1

Hi all, I am having some trouble with this lab.

First, here is my code:

HTML (unchanged)

<!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>

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

</html>

CSS (unchanged)

* {
     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;
    }
}

JS

const markdownInput = document.getElementById("markdown-input");
const previewHTML = document.getElementById("preview");
const rawHTML = document.getElementById("html-output");

const headingRegex = /^(#{1,6})\s+(.*)$/gm;
const boldTextRegex = /(\*{2}|_{2})(.*?)(\1)/gm;
const italicTextRegex = /(\*|_)(.*?)\1/gm;
const imgRegex = /[!]\[(.*?)\]\(([^)]*)\)/gm;
const linkRegex = /\[(.*?)\]\(([^)]*)\)/gm;
const quoteRegex = /^>(\s.*)/gm;
const newLine = /\n+/gm;

const regexPatterns = [
  { name: "heading", regex: headingRegex },
  { name: "bold", regex: boldTextRegex },
  { name: "italic", regex: italicTextRegex },
  { name: "img", regex: imgRegex },
  { name: "link", regex: linkRegex },
  { name: "quote", regex: quoteRegex },
  { name: "newLine", regex: newLine },
];

let raw = "";

markdownInput.addEventListener("input", updateValue);

function updateValue(e) {
  raw = e.target.value;
  rawHTML.textContent = raw;
  previewHTML.textContent = raw;
  convertMarkdown();
}

function findMatches(currentString) {
  let matchedRegexPatterns = [];

  for (let i = 0; i < regexPatterns.length; i++) {
    regexPatterns[i].regex.lastIndex = 0;
    if (regexPatterns[i].regex.test(currentString) === true) {
      matchedRegexPatterns.push(regexPatterns[i]);
      // console.log(`${regexPatterns[i].name} is true`)
    }
  }
  return matchedRegexPatterns;
}

function convertMarkdown() {
  let matchedRegexPatterns = findMatches(raw);
  let found;
  let transformedText = raw;

  //heading
  if (matchedRegexPatterns.find((p) => p.name === "heading")) {
    found = matchedRegexPatterns.find((p) => p.name === "heading");
    // console.log(`${found.name} regex is working`);

    let rawMinusMarkdown1 = transformedText.replace(
      found.regex,
      (fullMatch, group1, group2) => {
        let hCount = group1.length;
        return `<h${hCount}>${group2.trim()}</h${hCount}>`;
      },
    );

    transformedText = rawMinusMarkdown1;
  }
    matchedRegexPatterns = findMatches(transformedText);

  //quote
  if (matchedRegexPatterns.find((p) => p.name === "quote")) {
    found = matchedRegexPatterns.find((p) => p.name === "quote");
    // console.log(`${found.name} regex is working`);

    let rawMinusMarkdown1 = transformedText.replace(
      found.regex,
      (fullMatch, group1) => {
        return `<blockquote>${group1.trim()}</blockquote>`;
      },
    );

    transformedText = rawMinusMarkdown1;
  }
  matchedRegexPatterns = findMatches(transformedText);

  //bold
  if (matchedRegexPatterns.find((p) => p.name === "bold")) {
    found = matchedRegexPatterns.find((p) => p.name === "bold");
    // console.log(`${found.name} regex is working`);

    let rawMinusMarkdown1 = transformedText.replace(
      found.regex,
      (fullMatch, group1, group2, group3) => {
        return `<strong>${group2}</strong>`;
      },
    );

    transformedText = rawMinusMarkdown1;
  }
  matchedRegexPatterns = findMatches(transformedText);

  //italic
  if (matchedRegexPatterns.find((p) => p.name === "italic")) {
    found = matchedRegexPatterns.find((p) => p.name === "italic");
    // console.log(`${found.name} regex is working`);

    let rawMinusMarkdown1 = transformedText.replace(
      found.regex,
      (fullMatch, group1, group2, group3) => {
        return `<em>${group2}</em>`;
      },
    );

    transformedText = rawMinusMarkdown1;
  }
  matchedRegexPatterns = findMatches(transformedText);

  //img
  if (matchedRegexPatterns.find((p) => p.name === "img")) {
    found = matchedRegexPatterns.find((p) => p.name === "img");
    // console.log(`${found.name} regex is working`);

    let rawMinusMarkdown1 = transformedText.replace(
      found.regex,
      (fullMatch, group1, group2) => {
        return `<img alt="${group1}" src="${group2}">`;
      },
    );

    transformedText = rawMinusMarkdown1;
  }
  matchedRegexPatterns = findMatches(transformedText);

  //link
  if (matchedRegexPatterns.find((p) => p.name === "link")) {
    found = matchedRegexPatterns.find((p) => p.name === "link");
    // console.log(`${found.name} regex is working`);

    let rawMinusMarkdown1 = transformedText.replace(
      found.regex,
      (fullMatch, group1, group2) => {
        return `<a href="${group2}">${group1}</a>`;
      },
    );

    transformedText = rawMinusMarkdown1;
  }

 
  matchedRegexPatterns = findMatches(transformedText);

  transformedText = transformedText.replace(/\n+/gm, "");
  rawHTML.textContent = transformedText;
  previewHTML.innerHTML = transformedText;
}

convertMarkdown();

My issue is that my code appears to work. But some tests are not passing.

For example, I keep failing step 2 (but passing step 3):

When the value of #markdown-input is # title 1, convertMarkdown() should return <h1>title 1</h1>.

Yet, it all looks fine on my end

image
image316×271 3.78 KB

Same thing is happening on steps 6, 7, 11, 12, 16 (etc.)

If anyone has any ideas where I can start troubleshooting, I would really appreciate it.

2

What your convertMarkdown function returns?

There’s also another detail about convertMarkdown that’s relevant here. How does it get the input to convert? On what that depends?