字符串的拆分可以使用函数:split(),功能:使用一个指定的分隔符把一个字符串分割存储到数组
例子:
str="jpg|bmp|gif|ico|png"
arr=theString.split("|")
//arr是一个包含字符值"jpg"、"bmp"、"gif"、"ico"和"png"的数组
扩展资料
其他的截取函数的知识点
1、函数:substring()
(1)定义:substring(start,end)表示从start到end之间的字符串,包括start位置的字符但是不包括end位置的字符。
(2)功能:字符串截取,比如想从"MinidxSearchEngine"中得到"Minidx"就要用到substring(0,6)
(3)例子:
var src="images/off_1.png"alert(src.substring(7,10))//弹出值为:off2、函数:substr()
(1)定义:substr(start,length)表示从start位置开始,截取length长度的字符串。
(2)功能:字符串截取
(3)例子:
var src="images/off_1.png"alert(src.substr(7,3))//弹出值为:off
参考资料来源:MDN web docs 官方网站-函数
前言
最近笔者把之前写的文章( markdown )数据,全部同步到数据库里,来交给多端去实时渲染。在同步的过程中,却出现了一些问题。
笔者这里举个例子,让大家有所感受:
而且通过这个思路,还演化出 MDX 这个格式,大大的增强了 JSX 与 Markdown 混合书写时的开发体验,增强了它的表现能力。
怎么做到的呢?
我们知道,原生 Markdown 功能很少,不会做任何花哨的事情,这导致它无法满足大量的场景。于是乎,大量的开发人员充分发挥了 主观能动性 ,定制了许多的 Markdown 编译器。
以著名的 Typora 为例,它就集成了 flowchart.js , mermaid 这类的图表库。我们可以在 md 里快速的生成一些简单的图表,但是遇到复杂的 case 时,可操控性还是远远弱于代码的。(这种情况,通常会在编辑器外部,先把图表做好,再把图片导出,插入 md 里)
甚至还出现了 nodeppt 这样,使用 markdown 来制作 ppt 的包。笔者曾经使用过一段时间,认为使用的场景,还是以部门内部的分享为主。受限于许多难记的语法和 md 自身的表现力,在遇到高自定义化的场景时,制作成本会远远超出 powerpoint 。
markdown 数据的分离存储
那么进入正题了,如何对 markdown 内不同的数据进行归类呢?
我们知道,不进行预处理的话,直接存进数据库里,无非就是一堆字符串。这堆字符串里藏着的数据,去实时处理,就是对计算机算力的浪费。
许多的 markdown 解析器,也都能够支持像 yaml , json , toml , csv 等数据格式,此时预先把它们存进数据库就很有必要了。
怎么解析呢? 通常的做法就2字, 标记 ,在编写时,把它们用特殊的 flag 标识起来,比较通用的做法有:
--- {{code}} --- => yaml
---toml {{code}} --- => toml
---json {{code}} --- => json
这种做法本质上,和代码染色类似:
```js(染色语言) {{code}} ```
于是在标记出来之后,我们就可以非常容易的,对这堆字符串,进行 截取解析 再 分发给不同的解析引擎处理 了。现有的实现也很多,比如 gray-matter 。
但是这只解决了数据分离的问题,还有一个组件渲染的问题没有解决。
组件的原生渲染
在谈这个之前,先看看 md 是如何转成 html 的:
以 markded , markdown-it , unified(remark) 为例
它们无非是 把 md 先解析成 tokens/mdast , 例如:
然后再交给 html 的 renderer 去处理的,上述的例子可以很容易的看出它的结果。
那么非转化成 html ,而去转化为原生标签怎么做呢?解决方案也有很多。
先说一下我实现的方案:
即 这一段字符串原封不动的存入数据库中,
然后在其他平台的场景,都去编写或者移植一个 Markdown 解析器,接着呢
这种做法本质就是 条件渲染 ,相当于一个 if 分支。
这个解决方案需要在不同的平台上,把 icebreaker-love-music 这个组件都实现一遍,并作为插件挂载在 Markdown 解析器中。
它的缺点也是很明显的:
另一种的畅想
另外一种则是我的畅想了,我们能否把组件本身,进行编译,变成一种 IL (Intermediate Language)的存在,交给各个端,进行原生渲染呢?
比如我们知道, web component 浏览器端原生支持
vue 组件可以被 @vue/web-component-wrapper 转化为 web-component
react 则有 react-web-component
那么 web-component 有可能,能依托一个像 QuickJS 这样的 Javascript Engine ,在原生环境进行实时的编译渲染吗?
以上这些就是笔者的一些愚见,如有想法,欢迎大家讨论和指点。
附录(ast的生成与转化)
syntax-tree
mdast-util-from-markdown
mdast-util-to-hast