第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

使用 JavaScript 將純文本列表轉(zhuǎn)換為 HTML 列表

使用 JavaScript 將純文本列表轉(zhuǎn)換為 HTML 列表

茅侃侃 2022-01-07 19:02:11
我經(jīng)常收到 PDF 格式的文本列表,這些文本列表是分層的(通常是三層深)。我想將它們放入 HTML 列表中,以便它們可以使用 CSS 進(jìn)行樣式設(shè)置并變得更美觀。由于數(shù)據(jù)量大,我正在嘗試使用 JavaScript 自動(dòng)化該過程。示例源數(shù)據(jù):?First Level 1 list item– First Level 2 list item, which is a subset of the first Level 1 list item.– Second Level 2 list item, which is a subset of the first Level 1 list item.? First Level 3 list item, which is a subset of the second Level 2 list item.?Second Level 1 list item.示例目標(biāo):<ul>    <li>First Level 1 list item</li>        <ul>            <li>First Level 2 list item, which is a subset of the first Level 1 list item.</li>            <li>Second Level 2 list item, which is a subset of the first Level 1 list item.                <ul>                    <li>First Level 3 list item, which is a subset of the second Level 2 list item.</li>                </ul>            </li>        </ul>    <li>Second Level 1 list item.</li></ul>目前進(jìn)展:我已經(jīng)確定我可以將 1 級(jí)列表項(xiàng)與此正則表達(dá)式匹配: /^?.+$/gm并將 2 級(jí)列表項(xiàng)與此正則表達(dá)式匹配: /^\–.+$/gm和 3 級(jí): /^?.+$/gm或者簡(jiǎn)單地通過組合這些來(lái)一次界定所有列表級(jí)別:string.match(/(^?.+$)|(^\–.+$)|(^?.+$)/gm);現(xiàn)在知道如何匹配不同類型的項(xiàng)目,我正試圖弄清楚如何對(duì)它們進(jìn)行排序。從概念上講,如果我將它們?nèi)糠旁谝粋€(gè)數(shù)組中(讓我們?cè)谙乱粋€(gè)示例中使用簡(jiǎn)單的顏色編碼),那么應(yīng)該可以創(chuàng)建一個(gè)函數(shù)來(lái)識(shí)別模式并在正確的層次結(jié)構(gòu)中創(chuàng)建一個(gè)多維數(shù)組,然后創(chuàng)建另一個(gè)函數(shù)在適當(dāng)?shù)奈恢幂敵鲇?HTML 標(biāo)記填充的內(nèi)容?;陬愋蛯⒁痪S數(shù)組轉(zhuǎn)換為多維數(shù)組的可視化:假設(shè)在上面的簡(jiǎn)化示例中,我們只有一個(gè)對(duì)應(yīng)于顏色的三個(gè)字母的字符串 - r、g、b。所以這可能看起來(lái)像: rrgbrgbrgbbrggbr我一直在試驗(yàn)并試圖將這種結(jié)構(gòu)放入多維數(shù)組中。我相信需要低于 3 級(jí)的一維來(lái)保存實(shí)際的文本字符串。并且需要高于 1 級(jí)的一個(gè)維度來(lái)包含每個(gè)完整列表。所以像這樣的結(jié)構(gòu):list[    level1    [        level2        [            level3            [                   string                ["list item text"]            ]        ]    ]]在這里,我在弄清楚如何對(duì)所有這些進(jìn)行排序時(shí)遇到了一些麻煩。任何幫助表示贊賞。
查看完整描述

1 回答

?
白豬掌柜的

TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個(gè)贊

不需要正則表達(dá)式。


var log = console.log;

var data = `?First Level 1 list item

– First Level 2 list item, which is a subset of the first Level 1 list item.

– Second Level 2 list item, which is a subset of the first Level 1 list item.

? First Level 3 list item, which is a subset of the second Level 2 list item.

?Second Level 1 list item.`;

//split text to array of string. One item per line

data = data.split("\n");

var firstChar,prevFirstChar = "";

//our output struct

var struct = [];

var cursor = struct;

//we need only one token for return to first level

var lvl1Key = "?";

var prevnode = {};


data.forEach(line=>{

    //get token

    firstChar = line.charAt(0);

    let node = {

        str : line.slice(1),

        child : []

    };

    if (firstChar == lvl1Key) {

      //return to root

      cursor = struct;

    } else if (firstChar != prevFirstChar) {

      //move up if token change and it is not root token

      cursor = prevnode.child;

    }

    cursor.push(node);

    prevnode = node;

    prevFirstChar = firstChar;

});

log(struct);

//Ok, we get struct, convert this to html

//offset for formating

const offsetSize = 2;

//recursive function node - array of { str : "string", childs : [nodes]}

var toHtml = function(node, offset = "") {

    var ret = offset + "<ul>\n";

    offset += " ".repeat(offsetSize);

    node.forEach(rec=>{

        ret += offset + "<li>" + rec.str + "</li>\n";

        //if array not empty add html for childs

        if (rec.child.length) {

            ret += toHtml(rec.child, offset + " ".repeat(offsetSize));

        }

    });

    offset = offset.slice(offsetSize);

    ret += offset + "</ul>\n";

    return ret;

}

log(toHtml(struct));


查看完整回答
反對(duì) 回復(fù) 2022-01-07
  • 1 回答
  • 0 關(guān)注
  • 430 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)