Build a Markdown to HTML Converter

JavaScript
1

I’m having trouble getting started. For now, i’m just focussing on the first 3 matches - the headings.

I can get it to match with #, ## or ### - i can get a true or false. But how can i get it to know which regex it has matched with?

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

let heading1 = /^#$/g;
let heading2 = /^##$/g;
let heading3 = /^###$/g;
let boldText1;
let boldText2;
let italicText1;
let italicText2;
let altText;
let linkText;
let quote;

let inputString;


let scenerios = [heading1, heading2, heading3];


function convertMarkdown() {
  
}

markdownInput.addEventListener('input', () => {
  inputString = markdownInput.value;
  console.log(inputString);

  

  const hasMatch = scenerios.some((regex) => regex.test(inputString));
  console.log(hasMatch);

  const matches = scenerios.flatMap((regex) => inputString.match(regex) || []);
console.log(matches);

  
});


convertMarkdown();
2

that is something that you need to consider with your approach. How do you know if a regex is matching a string?

3 
let heading1 = /^#$/g;
let heading2 = /^##$/g;
let heading3 = /^###$/g;

let scenerios = [heading1, heading2, heading3];

const hasMatch = scenerios.some((regex) => regex.test(inputString));
  console.log(hasMatch);

This gives me a true or false if i get a match

4

you are not told which regex is matching tho, are you? you need to consider a different approach

5

ok i have changed my approach and most of the tests are now passing

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

let heading = /^#{1,3}/;
let boldText = /^(?:\*\*|__)(.*?)(?:\*\*|__)$/;
let italicText = /^(?:\*|_)(.*?)(?:\*|_)$/;
let altText = /^(?:\!\[)(.*?)(?:\]\()(.*?)(?:\))$/;
let linkText = /^(?:\[)(.*?)(?:\]\()(.*?)(?:\))$/;
let quote = /^>/;
let lineBreak = /\n/;

let inputString;
let firstString;
let secondString;





function convertMarkdown() {
  inputString = markdownInput.value;

  if (lineBreak.test(inputString)) {
    let stringEnd = inputString.indexOf("\n");
    firstString = inputString.slice(0, stringEnd);
    secondString = inputString.slice(stringEnd + 1, inputString.length);
    console.log(firstString);
    console.log(secondString);
  }
  
  if (heading.test(inputString)) {
    if (inputString[2] === "#") {
      return "<h3>" + inputString.slice(4, inputString.length) + "</h3>";
    } else if (inputString[1] === "#") {
      return "<h2>" + inputString.slice(3, inputString.length) + "</h2>";
    } else {
      return "<h1>" + inputString.slice(2, inputString.length) + "</h1>";
    }
  } else if (boldText.test(inputString)) {
    return "<strong>" + inputString.slice(2, inputString.length - 2) + "</strong>";
  } else if (italicText.test(inputString)) {
    return "<em>" + inputString.slice(1, inputString.length - 1) + "</em>";
  } else if (altText.test(inputString)) {
    let linkEnd = inputString.indexOf("]");
    return '<img alt="' + inputString.slice(2, linkEnd) + '" src="' + inputString.slice(linkEnd + 2, inputString.length - 1) + '">';
  } else if (linkText.test(inputString)) {
    let linkEnd = inputString.indexOf("]");
    return '<a href="' + inputString.slice(linkEnd + 2, inputString.length - 1) + '">' + inputString.slice(1, linkEnd) + '</a>';
  } else if (quote.test(inputString)) {
    return "<blockquote>" + inputString.slice(2, inputString.length) + "</blockquote>";
  }   else {
    return inputString
  }

}

markdownInput.addEventListener('input', () => {
  htmlOutput.textContent = convertMarkdown();
  preview.innerHTML = convertMarkdown();
});

The next ones i want to focus on are the ones like this:

When the value of #markdown-input is # title 1 followed by # alternate title on a new line,

I added in this to check for a line break:

let lineBreak = /\n/;

let inputString;
let firstString;
let secondString;

if (lineBreak.test(inputString)) {
    let stringEnd = inputString.indexOf("\n");
    firstString = inputString.slice(0, stringEnd);
    secondString = inputString.slice(stringEnd + 1, inputString.length);
    console.log(firstString);
    console.log(secondString);
  }

That successfully splits the string into two strings if there is a line break. But then i’m not sure how to put the two strings through my function, because the function only works for one string.