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

JavaScript
1

Tell us what’s happening:

Failing test 38 but my output seems the same

  1. When the value of #markdown-input is ![alt-text](image-source) followed by ![alt-text-2](image-source-2) on a new line, convertMarkdown() should return <img alt="alt-text" src="image-source"><img alt="alt-text-2" src="image-source-2">.

Here’s my result returned by the function compared to the desired output:

result <img alt="alt-text" src="image-source"><img alt="alt-text-2" src="image-source-2">
       <img alt="alt-text" src="image-source"><img alt="alt-text-2" src="image-source-2">

Not sure what to check next.

Your code so far

<!-- file: index.html -->


/* file: script.js */
let input = document.getElementById("markdown-input");
let raw = document.getElementById("html-output");
let preview = document.getElementById("preview");

let regex = {
  strong: /(?:\*{2}|_{2})(.*)(?:\*{2}|_{2})$/,
  em: /(?<!\*)(?:\*|_)(?!\*)(.*)(?<!\*)(?:\*|_)/,
  h1: /^# (.*)$/,
  h2: /^## ([\w\d\s]*)$/,
  h3: /^### ([\w\d\s]*)$/,
  blockquote: /^> (.*)$/,
  img: /^!\[([\w\d\s-]*)\]\(([\w\d\s-]*)\)$/,
  a: /^\[([\w\d\s-]*)\]\(([\w\d\s-]*)\)$/,
};

function convertMarkdown() {
  console.log("New text")
  preview.innerHTML = "";
  let result = "";

  let lines = input.value.split("\n");
  let element;
  for (let line of lines) {
    console.log("current line ", line);
    

      
      for (let key in regex) {
        
        if (line.match(regex[key])) {
          
          console.log("match", key, line.match(regex[key])[0]);
          
          if (key == "em" |
              key == "strong") {
            line = line.replace(line.match(regex[key])[0], `<${key}>${line.match(regex[key])[1]}</${key}>`)
            console.log(line)
          }

        

          if (key == "blockquote" |
              key == "h1" |
              key == "h2" |
              key == "h3" ) {
            element = document.createElement(key)
            element.innerHTML = line.match(regex[key])[1];
          }

          if (key == "img") {
            element = document.createElement(key);
            element.alt = line.match(regex[key])[1];
            element.src = line.match(regex[key])[2];
          }

          if (key == "a") {
            element = document.createElement(key);
            element.innerText = line.match(regex[key])[1];
            element.href = line.match(regex[key])[2];
          }


          
        } 
     
    
  
     

      }

      
        if (element) {
          console.log("append", element.innerText)
          preview.appendChild(element);
        } else {
          console.log("+=", line)
          preview.innerHTML += line;
        }
      
      
      
      }
   
        
      let text = preview.innerHTML
      .replace(/&lt;/g, '<')
      .replace(/&gt;/g, '>')

  result += text;
  console.log("result", result);
  return result;

  
}

convertMarkdown();
input.addEventListener("input", () => {
  raw.textContent = convertMarkdown();
});


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Challenge Information:

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

2

Ok, I found a problem, looking at the output from the tests it looks like the input is not getting reset or… something:

current line  ![alt-text](image-source)
result <img alt="alt-text" src="image-source">
current line  !![alt-text](image-source)
+= !![alt-text](image-source)
current line  ![alt-text-2](image-source-2)
match img ![alt-text-2](image-source-2)
append 
checkpoint
result !![alt-text](image-source)<img alt="alt-text-2" src="image-source-2">

It’s something I can look into anyways, I’ll update when I find it.

EDIT: The test is actually sending those double bangs. Modified the regex to account for that and it passed :+1:

3

I just ran into the same failing test as you (all other tests passing).
Discovered that when I removed the line anchors from the img regex, the final test passed.

Here’s my img regex for reference:

/(?:!\[)(.+)\]\((.+)\)/g
1 Like
4

The test is actually sending the !! which I think is a bit sneaky.

I’m also stuck on the next challenge! I thought it was going to be a quick one but it got hairy on the last step.

I think working on the next challenge (regex sandbox) gave me the idea to check about consecutive function calls, then I saw that !!

The test clearly says

When the value of #markdown-input is ![alt-text](image-source) followed by ![alt-text-2](image-source-2) on a new line

Anyways something to watch out for.

1 Like
5

I’ll be doing that one tomorrow… I’ll let you know how I get on!

1 Like
6

You’re right that the Regex Sandbox is a bit thorny. I got there but I don’t think my solution is the most elegant…

1 Like
7

It happens often where I go down one path but then I reach a test that gives me a better understanding of the true requirements and then I need to refactor and refactor.

After refactoring it becomes clear I need a different approach from the start. If it gets convoluted I start to feel I’m missing some obvious method.

Everything was smooth with the regex sandbox (a bad sign…) until I started highlighting the matching characters.

Two problems I had were highlighting multiple matches that are the same and not highlighting matching characters in the HTML SPAN that we’re adding.

I ended up:

  • creating a new Object with the match, position and length of each match.
  • converting the string into an array so I could splice in the HTML

Now I realize maybe I should have tried matchAll() but I wasn’t sure how to use it.

Even if the solutions aren’t elegant you end up learning so much by doing it.

1 Like