Build a markdown to html converter

JavaScript
1

Some advice would be greatly appreciated. I have the h1 and h2 passing for this program. I could continue on with the rest and get it right but it seems like a lot of code. Is there a better way of doing it? Thanks in advance for your help.

const markdownInput = document.getElementById('markdown-input')
const htmlOutput = document.getElementById("html-output")
const preview = document.getElementById("preview")
const heading1Regex = /^#\s(.*)/
const heading2Regex = /^##\s(.*)/
const regexList = [heading1Regex, heading2Regex]

markdownInput.addEventListener('input', () => { 
  convertMarkdown()
})

const convertMarkdown = () => {
  const filteredRegex = regexList.filter(item => item.test(markdownInput.value))
  console.log(filteredRegex)
  const arr = markdownInput.value.split('\n')  
 //console.log(arr) 
 let html = ``
 if (arr[0].startsWith('# ')){
   if(arr.length > 1){
    arr.forEach(item => {
    html += item.replace(filteredRegex[0], `<h1>${item.slice(2)}</h1>`)
    })
    htmlOutput.innerText = html
    preview.innerHTML = html
    return html
  } else if(arr.length === 1) {
    html += arr[0].replace(filteredRegex[0], `<h1>${arr[0].slice(2)}</h1>`)
    htmlOutput.innerText = html
    preview.innerHTML = html
    return html
  }
 } else if(arr[0].startsWith('## ')){
   if(arr.length > 1){
     arr.forEach(item => {
       html += item.replace(filteredRegex[0], `<h2>${item.slice(3)}</h2>`)
     })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
   } else if(arr.length ===1) {
      html += arr[0].replace(filteredRegex[0], `<h2>${arr[0].slice(3)}</h2>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
   }
   
 }
  


}
2

it’s going to be lots of work, it is not an easy project, and it is a chance to use regex

3

hello. can someone tell me why step 20 and 23 dont pass? My outpusts are correct yet it doesn’t pass.

const markdownInput = document.getElementById('markdown-input')
const htmlOutput = document.getElementById("html-output")
const preview = document.getElementById("preview")
const h1Regex = /^#\s(.*)/
const h2Regex = /^##\s(.*)/
const h3Regex = /^###\s(.*)/
const boldRegex = /(^\*\*(.*))|(^__(.*))/
const regexList = [h1Regex, h2Regex, h3Regex, boldRegex]

markdownInput.addEventListener('input', () => { 
  convertMarkdown()
})

const convertMarkdown = () => {
  const filteredRegex = regexList.filter(item => item.test(markdownInput.value))
  const arr = markdownInput.value.split('\n')  
  let html = ``
  if (arr[0].startsWith('# ')){
    if(arr.length > 1){
      arr.forEach(item => {
      html += item.replace(filteredRegex[0], `<h1>${item.slice(2)}</h1>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1) {
      html += arr[0].replace(filteredRegex[0], `<h1>${arr[0].slice(2)}</h1>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
  }
  }else if(arr[0].startsWith('## ')){
    if(arr.length > 1){
     arr.forEach(item => {
       html += item.replace(filteredRegex[0], `<h2>${item.slice(3)}</h2>`)
     })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1) {
      html += arr[0].replace(filteredRegex[0], `<h2>${arr[0].slice(3)}</h2>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }else if(arr[0].startsWith('### ')){
    if(arr.length > 1){
      arr.forEach(item => {
        html += item.replace(filteredRegex[0], `<h3>${item.slice(4)}</h3>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<h3>${arr[0].slice(4)}</h3>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }else if(arr[0].startsWith('**') | arr[0].startsWith('__')){
    if(arr.length > 1){
      arr.forEach(item => {
        html += item.replace(filteredRegex[0], `<p><strong>${arr[0].slice(2, arr[0].length - 2)}</strong></p>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<p><strong>${arr[0].slice(2, arr[0].length - 2)}</strong></p>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }
}
4

i figured out why those two steps weren’t passing and fixed it.

5

Hey. Step 38 wont pass yet the output is good.

const markdownInput = document.getElementById('markdown-input')
const htmlOutput = document.getElementById("html-output")
const preview = document.getElementById("preview")
const h1Regex = /^#\s(.*)/
const h2Regex = /^##\s(.*)/
const h3Regex = /^###\s(.*)/
const boldRegex = /(^\*\*(.*))|(^__(.*))/
const emRegex = /(^\*(.*))|(^_(.*))/
const h1strongRegex = /(^#\s\*\*(.*))|(^#\s__(.*))/
const altRegex = /^!\[(.*)/
const regexList = [h1strongRegex, h1Regex, h2Regex, h3Regex, boldRegex, emRegex, altRegex]

markdownInput.addEventListener('input', () => {  
  convertMarkdown()
})

const convertMarkdown = () => {
  const filteredRegex = regexList.filter(item => item.test(markdownInput.value))
  const arr = markdownInput.value.split('\n')  
  let html = ``

  if(arr[0].startsWith('# **') | arr[0].startsWith('# __')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<h1><strong>${arr[index].slice(4, arr[index].length - 4)}</strong></h1>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    } else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<h1><strong>${arr[0].slice(4, arr[0].length - 2)}</strong></h1>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }
  else if (arr[0].startsWith('# ')){
    if(arr.length > 1){
      arr.forEach(item => {
      html += item.replace(filteredRegex[0], `<h1>${item.slice(2)}</h1>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1) {
      html += arr[0].replace(filteredRegex[0], `<h1>${arr[0].slice(2)}</h1>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
  }
  }else if(arr[0].startsWith('## ')){
    if(arr.length > 1){
     arr.forEach(item => {
       html += item.replace(filteredRegex[0], `<h2>${item.slice(3)}</h2>`)
     })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1) {
      html += arr[0].replace(filteredRegex[0], `<h2>${arr[0].slice(3)}</h2>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }else if(arr[0].startsWith('### ')){
    if(arr.length > 1){
      arr.forEach(item => {
        html += item.replace(filteredRegex[0], `<h3>${item.slice(4)}</h3>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<h3>${arr[0].slice(4)}</h3>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }else if(arr[0].startsWith('**') | arr[0].startsWith('__')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<p><strong>${arr[index].slice(2, arr[index].length - 2)}</strong></p>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<p><strong>${arr[0].slice(2, arr[0].length - 2)}</strong></p>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    } 
  }else if(arr[0].startsWith('*') | arr[0].startsWith('_')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<p><em>${arr[index].slice(1, arr[index].length - 1)}</em></p>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<p><em>${arr[0].slice(1, arr[0].length - 1)}</em></p>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  } else if(arr[0].startsWith('![')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<img alt='${arr[index].slice(2, arr[index].indexOf(']'))}' src='${arr[index].slice(arr[index].indexOf('(') + 1)}'>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    } else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<img alt='${arr[0].slice(2, arr[0].indexOf(']'))}' src='${arr[0].slice(arr[0].indexOf('(') +1, -1)}'>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }
}
6

In your html output there is

<img alt='alt-text' src='image-source)![alt-text-2](image-source-2'>

when testing for ![alt-text](image-source)![alt-text-2](image-source-2)

that is not correct html for two images

7

Hi. Ive taken the brakets out yet still not passing. Output looks good.

this is the raw HTML output Im getting
<img alt='alt-text' src='image-source'><img alt='alt-text-2' src='image-source-2'>

const markdownInput = document.getElementById('markdown-input')
const htmlOutput = document.getElementById("html-output")
const preview = document.getElementById("preview")
const h1Regex = /^#\s(.*)/
const h2Regex = /^##\s(.*)/
const h3Regex = /^###\s(.*)/
const boldRegex = /(^\*\*(.*))|(^__(.*))/
const emRegex = /(^\*(.*))|(^_(.*))/
const h1strongRegex = /(^#\s\*\*(.*))|(^#\s__(.*))/ 
const altRegex = /^!\[(.*)/
const regexList = [h1strongRegex, h1Regex, h2Regex, h3Regex, boldRegex, emRegex, altRegex]

markdownInput.addEventListener('input', () => {  
  convertMarkdown()
})

const convertMarkdown = () => {
  const filteredRegex = regexList.filter(item => item.test(markdownInput.value))
  const arr = markdownInput.value.split('\n')  
  let html = ``

  if(arr[0].startsWith('# **') | arr[0].startsWith('# __')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<h1><strong>${arr[index].slice(4, arr[index].length - 4)}</strong></h1>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    } else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<h1><strong>${arr[0].slice(4, arr[0].length - 2)}</strong></h1>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }
  else if (arr[0].startsWith('# ')){
    if(arr.length > 1){
      arr.forEach(item => {
      html += item.replace(filteredRegex[0], `<h1>${item.slice(2)}</h1>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1) {
      html += arr[0].replace(filteredRegex[0], `<h1>${arr[0].slice(2)}</h1>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
  }
  }else if(arr[0].startsWith('## ')){
    if(arr.length > 1){
     arr.forEach(item => {
       html += item.replace(filteredRegex[0], `<h2>${item.slice(3)}</h2>`)
     })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1) {
      html += arr[0].replace(filteredRegex[0], `<h2>${arr[0].slice(3)}</h2>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }else if(arr[0].startsWith('### ')){
    if(arr.length > 1){
      arr.forEach(item => {
        html += item.replace(filteredRegex[0], `<h3>${item.slice(4)}</h3>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<h3>${arr[0].slice(4)}</h3>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }else if(arr[0].startsWith('**') | arr[0].startsWith('__')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<p><strong>${arr[index].slice(2, arr[index].length - 2)}</strong></p>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<p><strong>${arr[0].slice(2, arr[0].length - 2)}</strong></p>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    } 
  }else if(arr[0].startsWith('*') | arr[0].startsWith('_')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<p><em>${arr[index].slice(1, arr[index].length - 1)}</em></p>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<p><em>${arr[0].slice(1, arr[0].length - 1)}</em></p>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  } else if(arr[0].startsWith('![')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<img alt='${arr[index].slice(2, arr[index].indexOf(']'))}' src='${arr[index].slice(arr[index].indexOf('(') +1, -1)}'>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    } else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<img alt='${arr[0].slice(2, arr[0].indexOf(']'))}' src='${arr[0].slice(arr[0].indexOf('(') +1, -1)}'>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  } 
}
8

that’s not the outpud I am seeing, I still see <img alt='alt-text' src='image-source) ![alt-text-2](image-source-2'>

did you share your updated code?

9

yes i did. Thats strange because Im not getting your output

10

try sharing your code again, post your latest version

11

whoops, i forgot something

12 
const markdownInput = document.getElementById('markdown-input')
const htmlOutput = document.getElementById("html-output")
const preview = document.getElementById("preview")
const h1Regex = /^#\s(.*)/
const h2Regex = /^##\s(.*)/
const h3Regex = /^###\s(.*)/
const boldRegex = /(^\*\*(.*))|(^__(.*))/
const emRegex = /(^\*(.*))|(^_(.*))/
const h1strongRegex = /(^#\s\*\*(.*))|(^#\s__(.*))/ 
const altRegex = /^!\[(.*)/
const regexList = [h1strongRegex, h1Regex, h2Regex, h3Regex, boldRegex, emRegex, altRegex]

markdownInput.addEventListener('input', () => {  
  convertMarkdown()
})

const convertMarkdown = () => {
  const filteredRegex = regexList.filter(item => item.test(markdownInput.value))
  const arr = markdownInput.value.split('\n')  
  let html = ``

  if(arr[0].startsWith('# **') | arr[0].startsWith('# __')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<h1><strong>${arr[index].slice(4, arr[index].length - 4)}</strong></h1>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    } else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<h1><strong>${arr[0].slice(4, arr[0].length - 2)}</strong></h1>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }
  else if (arr[0].startsWith('# ')){
    if(arr.length > 1){
      arr.forEach(item => {
      html += item.replace(filteredRegex[0], `<h1>${item.slice(2)}</h1>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1) {
      html += arr[0].replace(filteredRegex[0], `<h1>${arr[0].slice(2)}</h1>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
  }
  }else if(arr[0].startsWith('## ')){
    if(arr.length > 1){
     arr.forEach(item => {
       html += item.replace(filteredRegex[0], `<h2>${item.slice(3)}</h2>`)
     })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1) {
      html += arr[0].replace(filteredRegex[0], `<h2>${arr[0].slice(3)}</h2>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }else if(arr[0].startsWith('### ')){
    if(arr.length > 1){
      arr.forEach(item => {
        html += item.replace(filteredRegex[0], `<h3>${item.slice(4)}</h3>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<h3>${arr[0].slice(4)}</h3>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  }else if(arr[0].startsWith('**') | arr[0].startsWith('__')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<p><strong>${arr[index].slice(2, arr[index].length - 2)}</strong></p>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<p><strong>${arr[0].slice(2, arr[0].length - 2)}</strong></p>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    } 
  }else if(arr[0].startsWith('*') | arr[0].startsWith('_')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<p><em>${arr[index].slice(1, arr[index].length - 1)}</em></p>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<p><em>${arr[0].slice(1, arr[0].length - 1)}</em></p>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  } else if(arr[0].startsWith('![')){
    if(arr.length > 1){
      arr.forEach((item, index) => {
        html += item.replace(filteredRegex[0], `<img alt='${arr[index].slice(2, arr[index].indexOf(']'))}' src='${arr[index].slice(arr[index].indexOf('(') +1, -1)}'>`)
      })
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    } else if(arr.length === 1){
      html += arr[0].replace(filteredRegex[0], `<img alt='${arr[0].slice(2, arr[0].indexOf(']'))}' src='${arr[0].slice(arr[0].indexOf('(') +1, -1)}'>`)
      htmlOutput.innerText = html
      preview.innerHTML = html
      return html
    }
  } 
}

raw html output

<img alt='alt-text' src='image-source'><img alt='alt-text-2' src='image-source-2'>
14

ok, yes, it works. There is an issue tho

the test is checking for

!![alt-text](image-source)
![alt-text-2](image-source-2)

your app does nothing in that case

also it does nothing if I add text

image
image534×364 3.38 KB

it should always write something in the output if there is soemthign in the input