How to Import a Text File to a List in HTML5 / JavaScript even if it is not JSON or CSV?

Question

I am new here, please be kind. I am trying to import a text file into a HTML nested list. The HTML output I am trying to achieve would look like this:

    <ul>
        <li>FAVORITE SITES
            <ul>
                <li>eBay</li>
                <li>Google</li>
            </ul>
        </li>
        <li>AVOIDED SITES
            <ul>
                <li>Yahoo</li>
                <li>CraigsList</li>
            </ul>
        </li>
        <li>OTHER SITES
            <ul>
                <li>Alexa</li>
                <li>Amazon</li>
                <li>Jet</li>
            </ul>
        </li>
    </ul>

The text file I am loading using <input type="file"> is not formatted in a usual way - it is not JSON or CSV, it is formatted like below:

FAVORITE SITES {
!Variable=eBay
!Variable=Google
}

AVOIDED SITES {
!Variable=Yahoo
!Variable=CraigsList
}

OTHER SITES {
!Variable=Alexa
!Variable=Amazon
!Variable=Jet
}

Is there any way to load parse and input the values of the text file and load them into the list even though the file is in this non-standard format or will I need to change the format of the text file? Any help will be appreciated, thank you.

Define 2 sound regexes and parse the content by repeatedly calling its exec() method will be a practical solution. — tibetty
– tibetty, Commented Aug 16, 2017 at 5:57
Forgive me, I am a novice but thank you so much for the comment. Is there a regex to be had because the !Variable= is always the same but the headings, example "FAVORITE SITES" are always different. There may be many of them and they will not be known before it could be "FAVORITE SITES { }" or "CHICKEN DINNER { }", etc — Disciple Day
– Disciple Day, Commented Aug 16, 2017 at 6:06

qiAlex · Accepted Answer · 2017-08-16 06:42:45Z

2

let s = `FAVORITE SITES {
!Variable=eBay
!Variable=Google
}

AVOIDED SITES {
!Variable=Yahoo
!Variable=CraigsList
}

OTHER SITES {
!Variable=Alexa
!Variable=Amazon
!Variable=Jet
}`;

var ul = document.createElement('ul');

ul.innerHTML = s.replace(/(\})/gim, "</ul>\n</li>")
         .replace(/\{/gim, "\n<ul>")
         .replace(/!Variable=(\w+)\s*\n/gim, "<li>$1</li>\n")
         .split(/\s*\n\s*\n/)
         .map(v => v = '\n<li>' + v)
         .join('');

document.body.appendChild(ul);

answered Aug 16, 2017 at 6:42

qiAlex

4,3562 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tibetty · Accepted Answer · 2017-08-16 06:25:22Z

1

Please reference this code snippet;

// assign the file content to s
let s = `FAVORITE SITES {
!Variable=eBay
!Variable=Google
}

AVOIDED SITES {
!Variable=Yahoo
!Variable=CraigsList
}

OTHER SITES {
!Variable=Alexa
!Variable=Amazon
!Variable=Jet
}`;

let a = s.replace(/[\n\r]/g, '').split(/(.+?) \{(.+?)\}/g);

for (let i = 0; i < a.length - 1; i += 3) {
    // a[i + 1] is the outer li text
    let a2 = a[i + 2].split(/!Variable=([^!]+)/g);
    // every 2nd item of a2 is the inner li text
    // or you can filter out '' items
    // you can apply the same trick to a as well, but need to modify for-loop accordingly
    let a3 = a2.filter(v => v !== '');
    // now all items are a3 can be used directly as inner li text
}

edited Aug 16, 2017 at 6:25

answered Aug 16, 2017 at 6:19

tibetty

5632 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to Import a Text File to a List in HTML5 / JavaScript even if it is not JSON or CSV?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related