Build a Markdown to HTML Converter - Build a Markdown to HTML Converter Steps 47,48,49 are not passing

JavaScript
1

Tell us what’s happening:

lab markdown to html converter : steps 47,48,49 aren’t passing

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

</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 */
let markdownInput=document.querySelector("#markdown-input");
let htmlOutput=document.querySelector("#html-output");
let preview=document.querySelector("#preview")
function convertMarkdown(){
let input=markdownInput.value;
let inputArr=input.split("\n");
let heading1Regex=/(?:^|^\s+)#\s(.*)/g;
let heading2Regex=/(?:^|^\s+)##\s(.*)/g;
let heading3Regex=/(?:^|^\s+)###\s(.*)/g;
let boldRegex=/(\*\*|__)(.*?)\1/g;
let italicRegex=/(\*|_)(.*?)\1/g;
let imgRegex=/!\[(.*?)\]\((.*?)\)/g;
let linkRegex=/\[([^\]]+)\]\(([^\)]+)\)/g;
let quoteRegex=/^>\s+(.*)/;
let result='';
for(let i=0;i<inputArr.length;i++){
  let x=inputArr[i];
  let y='';
  if(heading1Regex.test(x)){
    y=x.replace(heading1Regex,"<h1>$1</h1>");
    let regex=/<h1>(.*)<\/h1>/;
    let inter=y.replace(regex,"$1");
    if(boldRegex.test(inter)){
      y="<h1>"+inter.replace(boldRegex,"<strong>$2</strong>")+"</h1>";
    }
  }
  else if(heading2Regex.test(x)){
    y=x.replace(heading2Regex,"<h2>$1</h2>");
  }
  else if(heading3Regex.test(x)){
    y=x.replace(heading3Regex,"<h3>$1</h3>");
  }
  else if(boldRegex.test(x)){
    y=x.replace(boldRegex,"<strong>$2</strong>");
  }
  else if(italicRegex.test(x)){
    y=x.replace(italicRegex,"<em>$2</em>");
  }
  else if(imgRegex.test(x)){
    y=x.replace(imgRegex,'<img alt="$1" src="$2">');
  }
  else if(linkRegex.test(x)){
    y=x.replace(linkRegex,'<a href="$2">$1</a>');
  }
  else if(quoteRegex.test(x)) {
  let inter = x.replace(quoteRegex, "$1");
let formatted = inter.replace(boldRegex, (match, p1, p2) => {
  let innerFormatted = p2.replace(italicRegex, "<em>$2</em>");
  return `<strong>${innerFormatted}</strong>`;
});

y = `<blockquote>${formatted}</blockquote>`;

}
  else{
    y=x;
  }
result+=y+"\n"
}
htmlOutput.textContent = result;
preview.innerHTML = result;
return result;
}
markdownInput.addEventListener("input", convertMarkdown);

Your browser information:

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

Challenge Information:

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

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

I am having difficulty in converting bold or italic into quotes (quoteRegex block) , for example for input : > **this is a *quote***
I should have this output : <blockquote><strong>this is a <em>quote</em></strong>
But I am having this output : > <strong>this is a *quote</strong>*

it works fine for no bold/italics in blockquote i.e for input > this is a quote I do get output <blockquote>this is a quote</blockquote>

4

can anyone help with this ? i am like stuck on this for a week.