[英]Javascript Markdown Parsing
我正在對HTML解析器進行降價。 我知道這是一個很大的項目,並且有第三方庫,但是我仍然想自己推出一個簡單的解決方案,該方案不必處理降價的每個方面。
到目前為止,該過程是接受輸入(在我的情況下為textarea的值)並逐行解析它。
var html = [];
var lines = txt.split('\n'); //Convert string to array
//Remove empty lines
for(var index = lines.length-1; index >= 0; index--) {
if(lines[index] == '') lines.splice(index, 1);
}
//Parse line by line
for(var index = 0; index <= lines.length-1; index++) {
var str = lines[index];
if(str.match(/^#[^#]/)) {
//Header
str = str.replace(/#(.*?)$/g, '<h1>$1</h1>');
} else if(str.match(/^##[^#]/)) {
//Header 2
str = str.replace(/##(.*?)$/g, '<h2>$1</h2>');
} else if(str.match(/^###[^#]/)) {
//Header 3
str = str.replace(/###(.*?)$/g, '<h3>$1</h3>');
} else if(str.trim().startsWith('+')) {
//Unordered List
var orig = str;
str = str.replace(/\+(.*?)$/, '<li>$1</li>');
var previous, next;
if(index > 0) previous = lines[index-1];
if(!previous || previous && previous.indexOf('+') < orig.indexOf('+')) {
str = '<ul>' + str;
}
if(index < lines.length-1) next = lines[index+1];
if(!next || next && next.indexOf('+') < orig.indexOf('+')) {
var count = Math.max(0, orig.indexOf('+') / 4);
if(next) count = count - Math.max(0, next.indexOf('+') / 4);
for(var i=1; i<=count; i++) {
str = str + '</ul>';
}
}
if(next && next.trim().indexOf('+') == -1) str = str + '</ul>';
} else if(str.match(/^[0-9a-zA-Z]/)) {
//Paragraph
str = str.replace(/^([0-9a-zA-Z].*?)$/g, '<p>$1</p>');
}
//Inline formatting
str = str.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); //Bold
str = str.replace(/\_\_(.*?)\_\_/g, '<strong>$1</strong>'); //Another bold
str = str.replace(/\*(.*?)\*/g, '<em>$1</em>'); //Italics
str = str.replace(/\_(.*?)\_/g, '<em>$1</em>'); //Another italics
//Append formatted to return string
html.push(str);
}
我遇到問題的地方是諸如ul這樣的嵌套塊。 當前,代碼查看以+開頭的行並將其包裝為li。 很好,但是這些列表項永遠不會放在ul中。 我可以逐行再次遍歷輸出,只包裝每組li's,但是當我嵌套了需要自己的ul的li's時,這會給我帶來麻煩。
關於如何應用這些附加包裝標簽的任何想法? 我已經考慮過在列表類型元素周圍使用自己的特殊字符,因此我知道在哪里添加包裝器標簽,但這打破了傳統的markdown。 我無法將原始減價傳遞給我以外的其他人,並且知道他們會了解發生了什么。
編輯我更新了代碼示例以包括一個有效的示例。 該工作示例還支持嵌套列表。
您需要一個非常簡單的狀態機。
當遇到第一個+
,添加<ul>
並引發一個標志。
如果您沒有看到以+
開頭的行並且您的標志升了,請關閉</ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.