Transform markdown into HTML code

Question

Transform markdown into HTML code

Is there a way to effectively transform a string that resembles the following format:

'* [-]Tree Item1',
'** [-]Tree Item1-1',
'*** Tree Item1-1-1',
'*** Tree Item1-1-2',
'*** Tree Item1-1-3',
'** Tree Item1-2',
'*** Tree Item1-2-1',
'** Tree Item1-3',
'* Tree Item2',
'** [-]Tree Item2-1',
'*** Tree Item2-1-1',
'**** Tree Item2-1-1-1',
'* Tree Item3'

into an HTML unordered list structured like this:

<ul>
   <li>
      Tree Item1
      <ul>
         <li>Tree Item1-1</li>
         ...
      <ul>
   </li>
   <li>
      Tree Item2
      <ul>
         <li>Tree Item2-1</li>
         ...
      <ul>
   </li>
   ...
</ul>

If you have suggestions or solutions, they would be greatly appreciated.

PS: Markdown libraries are not an option for my specific needs. I am looking for an algorithm that can accomplish this task.

javascript

Answer 1

Answer №1

When it comes to handling code, Stack Overflow relies on PageDown, a tool that is likely to suit your requirements.

Answer 2

When it comes to handling code, Stack Overflow relies on PageDown, a tool that is likely to suit your requirements.

Answer 3

Answer №2

Utilizing a markdown library may have been excessive and not a viable option in this scenario. However, I have managed to devise a solution that appears adequate for the time being...

Essentially, the string resembling markdown is initially split into an array. Subsequently, for each element within the array, the depth and text details are computed, which are then used to construct a nested array. The process goes something like this;

var arrList = str.split(','), //where str includes markdown-style string from the query provided above 
    nestedArray = [];

Array.forEach(arrList, function (item) {
   var nodeData = this.getNodeDataFromString(item);                
   //establishing a nested array based on level/text information obtained for each item,
   nestedArray.push(someWorkedOutData(nodeData));
}

function getNodeDataFromString () {
   var matches = str.match(/\*/g),
        retVal = {
            level: matches.length - 1
        },
        regex;

    regex = new RegExp('^\\' + matches.join('\\') + ' (.*)');
    str.replace(regex, function (match, p1) {
        retVal.text = p1;
    });
    return retVal;
}

The resultant nested array is then employed to create the HTML markup through a recursive function.

View the functional solution here (The solution has been crafted using the ExtJS library as I am currently working with it).

Any comments or critiques would be greatly appreciated.

Thank you,

C.

Answer 4

Utilizing a markdown library may have been excessive and not a viable option in this scenario. However, I have managed to devise a solution that appears adequate for the time being...

Essentially, the string resembling markdown is initially split into an array. Subsequently, for each element within the array, the depth and text details are computed, which are then used to construct a nested array. The process goes something like this;

var arrList = str.split(','), //where str includes markdown-style string from the query provided above 
    nestedArray = [];

Array.forEach(arrList, function (item) {
   var nodeData = this.getNodeDataFromString(item);                
   //establishing a nested array based on level/text information obtained for each item,
   nestedArray.push(someWorkedOutData(nodeData));
}

function getNodeDataFromString () {
   var matches = str.match(/\*/g),
        retVal = {
            level: matches.length - 1
        },
        regex;

    regex = new RegExp('^\\' + matches.join('\\') + ' (.*)');
    str.replace(regex, function (match, p1) {
        retVal.text = p1;
    });
    return retVal;
}

The resultant nested array is then employed to create the HTML markup through a recursive function.

View the functional solution here (The solution has been crafted using the ExtJS library as I am currently working with it).

Any comments or critiques would be greatly appreciated.

Thank you,

C.

Transform markdown into HTML code

Answer №1

Answer №2

Similar questions

The selected jquery script is failing to function as intended

When you call setTimeout from a static function, it does not get executed

"Exploring Mocha and Chai: Tips for Generating a Comprehensive List of Errors in Test Cases

My code seems to be malfunctioning - why can't I keep the aspect ratio?

Attempting to toggle variable to true upon click, but encountering unexpected behavior

Transitioning between modals using Tabler/Bootstrap components in a ReactJS environment

Waiting for a response from an API with the help of nodejs

Error: Unable to locate module - Invalid generator instance detected. The Asset Modules Plugin has been started with a generator object that does not adhere to the API standards

angularsjs state provider with multiple parameters

I'm having trouble accessing my POST data using console.log. Instead of getting the expected data, all I see in the console when I try to GET is "

Tips for managing this JavaScript JSON array

Creating nested tables by assigning unique Div IDs to each table element

The Blueimp File Uploader seems to be sending numerous submissions at once

`Upkeeping service variable upon route alteration in Angular 2`

How to extract data from Facebook's JSON using Javascript

Tips for extracting dynamically loaded content from a website using Node.js and Selenium?

The Axios.catch method does not handle network or console errors

Error is thrown when attempting to access nested elements using GetElementsByClassName within the window.onload function

React-native - Dropdownpicker - Error: Unable to retrieve label for selected choice

Instructions on how to implement a readmore button for texts that exceed a specific character length