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

Creating a hierarchical list structure from a one-dimensional list using parent and child relationships in JavaScript

Problems with form functionality in React component using Material UI

the dropdown menu toggle is not working as expected

Vuetify offers a convenient solution for implementing multiple buttons in a Vue

`javascript pop up notification will only display one time`

What is the best way to reference an i18n entry within .json files?

I need to mass upload a collection of resumes stored in a zip file, then extract and display the content of each resume using a combination of HTML

Experience the impact of a lagging network connection on Chrome extensions through the power of React-NextJS

Guide for populating the chosen item in a combobox when the form control option has various parameters

How to efficiently eliminate multiple entries with SREM in ioredis?

What is causing this code to break when using ajax's `data` parameter?

Transferring information between AngularJS and Express/Node without using AJAX

The loss of Webgl context that remains unrecovered

Allow the javascript callback function to complete before proceeding

Is there a way to send all the results of a Flask database query to a template in a way that jQuery can also access

Using both Ajax and a standard submit can be applied to a single form in jQuery

Programming the tab pages within Chrome

Notification pop-up for accepting cookies on a website

What is the correct RegEx pattern I should use to properly match the provided test case without including the ending period?

Issues with debuggers in Chrome and Firefox with AngularJS are causing frustration for developers