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

JavaScript
1

Tell us what’s happening:

I’m really appriciate who can support to analysis, how to pass these tests? Thanks.

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 */
function convertMarkdown(){
  const markInput = document.querySelector('#markdown-input')
  const rawHTML = document.querySelector('#html-output')
  const preview = document.querySelector('#preview')
  let strInMarkdown = ''

  markInput.addEventListener('input',()=>{
    strInMarkdown = markInput.value
    strInMarkdown = quote(strInMarkdown)
/** Replace the headings */
  const regHeading = /^#+ \w+[^\n]+/mg
  let headingMatchResult = strInMarkdown.match(regHeading)
  if(headingMatchResult === null){
    rawHTML.textContent = strInMarkdown
    preview.innerHTML = strInMarkdown
  }else{
  for(let s of headingMatchResult){
  let caputure = [...s.matchAll('#')].length
  let repaceStr = `<h${caputure}>${s.slice(caputure+1)}</h${caputure}>`
  strInMarkdown = strInMarkdown.replace(s,repaceStr)
  }
}
/** replace the <strong> element */
  strInMarkdown = boldF(strInMarkdown)

/** replace <em> element */
  strInMarkdown = italic(strInMarkdown)

/** replace <img> element */
  strInMarkdown = img(strInMarkdown)

/** replace <a> element */
  strInMarkdown = link(strInMarkdown)
    
    rawHTML.textContent = strInMarkdown
    preview.innerHTML = strInMarkdown
  })
  return strInMarkdown;
}

function quote(str){
  const reg = /(?<=\n *)> (?:(?!#+\s+).)+/g
  let outStr = str.replace(reg,match=>{
    return '<blockquote>'+match.slice(2)+'</blockquote>'
  });
  return outStr;
}

function boldF(str){
  const regBold = /\*\*.+\*\*/g
  const regBold2 = /__.+__/g
  let outStr = str.replace(regBold,match=>{
    return '<strong>'+match.slice(2,-2)+'</strong>'
  })
  outStr = outStr.replace(regBold2, match=>{
    return '<strong>'+match.slice(2,-2)+'</strong>'
  })
  return outStr
}

function italic(str){
  const regItalic = /(?<!\*)\*(?!\*).+?\*/g
  const regItalic2 = /(?<!_)_(?!_).+?_/g
  let outStr = str.replace(regItalic,match=>{
    return '<em>'+match.slice(1,-1)+'</em>'
  })
  outStr = outStr.replace(regItalic2,match=>{
    return '<em>'+match.slice(1,-1)+'</em>'
  })
  console.log(outStr)
  return outStr
}

function img(str){
  const regImg = /!\[(.+?)\]\((.+?)\)/g
  let outStr = str.replace(regImg, '<img alt=$1 src=$2>');
  return outStr;
}

function link(str){
  const regLink = /(?<!!)\[(.+?)\]\((.+?)\)/g
  let outStr = str.replace(regLink, '<a href=$2>$1</a>');
  return outStr;
}

console.log(convertMarkdown())

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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

Hi @wenlong.zhang198809

Don’t place the function call in a console log, just call it.

For test 6 compare the text in the input, preview, and output.

Happy coding