[前端js] 爬取亿图脑图大纲

标签：info 亿图 title 脑图 爬取 child div data markdownStr

这段程序使看到了好的东西,又没有零钱的产物
还是老师让画思维导图我不想画还想白嫖的想法
用时20分钟
就拿这个来作为例子 https://mm.edrawsoft.cn/template/286842

1. 找到一个突破点

我看了网络,没有接口,没办法偷懒
思维导图是canvas渲染的,我也懒得找数据从哪里来的,所以就只有大纲了

function getOutline(node) {
    let info = {child: []};
    info.title = $(node).children(".ed-outline-title").find("span").text();
    $(node).children(".ed-outline").each(function (index, ele) {
        info.child.push(getOutline(ele));
    });
    return info;
}
// 运行
// 里面是jquery的css选择器,选择的是大纲的节点
getOutline($("#app > div > div > div:nth-child(4) > div.ed-outline.ed-outline--top").get(0))

这会生成一个Json

{
	"child": [
		{
			"child": [
				{
					"child": [],
					"title": "没有孩子的三级"
				},
						{
					"child": [],
					"title": "没有孩子的三级"
				}
			],
			"title": "有孩子的二级"
		},
				{
			"child": [],
			"title": "没有孩子的二级"
		}
	],
	"title": "一级"
}

有了json,怎么转化为思维导图呢?
用markmap!

2. json转markdown生成思维导图

先做json转markdown,很简单

function toMarkdown(data, depth=0) {
    let markdownStr = "";
    data.title = data.title.replace(/[(\r\n)(\n)]/g,"<br/>");
    markdownStr +=  "    ".repeat(depth)+"- "+data.title+"\n";
    for (let i in data.child) {
        markdownStr += toMarkdown(data.child[i], depth+1);
    }
    return markdownStr;
}

在markdown里,换行能引起各种各样的错误,所以我将每一层的文字的换行符替换成<br/>

接下来是生成思维导图
试用: https://markmap.js.org/repl
源码: https://github.com/markmap/markmap
把刚才的那一段示例生成为markdown

- 一级
    - 有孩子的二级
        - 没有孩子的三级
        - 没有孩子的三级
    - 没有孩子的二级

打开网址,将markdown填入文本框

非常完美,这样子给老师交差就方便了
好了完整代码放到这里, 要是有变化我也不管啦, 我已经和老师交差了

(function () {
    function getOutline(node) {
        let info = {child: []};
        info.title = $(node).children(".ed-outline-title").find("span").text();
        $(node).children(".ed-outline").each(function (index, ele) {
            info.child.push(getOutline(ele));
        });
        return info;
    }
    function toMarkdown(data, depth=0) {
        let markdownStr = "";
        data.title = data.title.replace(/[(\r\n)(\n)]/g,"<br/>");
        markdownStr +=  "    ".repeat(depth)+"- "+data.title+"\n";
        for (let i in data.child) {
            markdownStr += toMarkdown(data.child[i], depth+1);
        }
        return markdownStr;
    }
    let outlineBox = $("#app > div > div > div:nth-child(4) > div.ed-outline.ed-outline--top").get(0);
    let copyBtn = $(`<button style="position:absolute;">复制思维导图markdown</button>`);
    copyBtn.css({
        "top": $(outlineBox).offset().top+"px",
        "right": $(outlineBox).offset().right+"px"
    });
    copyBtn.click(function () {
        navigator.clipboard.writeText(toMarkdown(getOutline(outlineBox)));
    });
    $("body").append(copyBtn);
})();

标签：info,亿图,title,脑图,爬取,child,div,data,markdownStr
From： https://www.cnblogs.com/dffxd/p/edrawsoft-outline-spider.html