Javascript Markdown Parsing
Javascript Markdown Parsing
我在一个markdown到html解析器。我知道这是一个大项目,有第三方库,但我还是想自己推出一个简单的解决方案,不用处理markdown的每一个方面。
到目前为止,这个过程是接受输入(在我的例子中是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,但是当我有嵌套的li需要它们自己的ul时,这就把我搞砸了。
对于如何应用这些额外的包装器标签有什么想法吗?我考虑过在列表类型元素周围使用我自己的特殊字符,这样我就知道在哪里添加包装器标记,但是这会破坏传统的标记。我不能把原始的标记传递给除了我自己以外的人,并且知道他们会理解发生了什么。
Edit我更新了我的代码示例以包含一个工作示例。工作示例还支持嵌套列表。
您需要一个非常简单的状态机。
当你遇到第一个+
时,加上<ul>
并升起一个标志。
如果您没有看到以+
开头的行并且您的标志升起,则关闭</ul>
相关文章:
- 有没有针对带有表的JavaScript的Markdown语法解析器
- Markdown模式代码镜像正在创建
- SCEditor BBcode to HTML parsing
- Github Flavored Markdown-空行代码块获胜't渲染
- 在来自Javascript中实时预览的文本中渲染Markdown
- Markdown语法高亮显示未按预期工作
- parsing .net DateTime in Ruby & JavaScript
- 如何在一个页面中使用多个markDown编辑器
- 将Markdown文件转换为PDF,同时剥离Jekyll Front Matter
- 加载Markdown时出现奇怪的Requirej行为
- 具有实时格式的Markdown编辑器
- Json javascript parsing
- Javascript HighCharts parsing CSV
- Github Markdown似乎不支持
- 是否可以禁用 MarkdownDeep Markdown 编辑器中的预览窗格
- IndexedDB:将 url 映射到接受的 markdown/HTML 文本格式标记的正确架构
- 加载一串 markdown 属性作为 JavaScript 对象
- 如何在Node.js / Express / MongoDB应用程序中将Markdown转换为HTML
- 使用 JavaScript 初始化 bootstrap-markdown 并自定义选项
- Javascript Markdown Parsing