js获取标签里的文本内容_js获取div中的内容

js获取标签里的文本内容_js获取div中的内容#’号开始的,如果页面中,有两个一样的,比如都是#我是h1,那就不好获取里面的domid,要获取Markdown转换成html的数据

js获取标签里的文本内容_js获取div中的内容"

使用Markdown编辑编写文章时,我们会使用h1-h6标签来定义章节标题,Markdown原生是以

‘#’ 号开始的,如果页面中,有两个一样的 ,比如都是 # 我是h1,那就不好获取里面的domid,要获取Markdown转换成html的数据

一.本人这边用的Markdown的转换插件是marked

npm i marked

二.拿到转换的html生成目录树

 const htmlData = `
            <h1 id="我是h1">我<strong>是</strong>h1<em>斜体</em>介绍</h1>
            <p>测试</p>
            <h2 id="我是h2">我是h2</h2>
            <p>测试</p>
            <h3 id="我是h3">我是h3</h3>
            <p>测试</p>
            <h4 id="我是h4">我是h4</h4>
            <p>测试</p>
            <h5 id="我是h5">我是h5</h5>
            <h1 id="我是h1-1">我是h1</h1>
            <p>测试</p>
            <h2 id="我是h2-1">我是h2</h2>
            <p>测试</p>
            <h3 id="我是h3-1">我是h3</h3>
            <p>测试</p>
            <h4 id="我是h4-1">我是h4</h4>
            <p>测试</p>
            <h5 id="我是h5-1">我是h5</h5>
            <h1 id="文档1管理">文档1管理</h1>
            <p>测试</p>
            <h2 id="文档2管理">文档2管理</h2>
            <p>测试</p>
            <h3 id="文档3管理">文档3管理</h3>
            <p>测试</p>
            <h4 id="文档4管理">文档4管理</h4>
            <p>测试</p>
            <h5 id="文档5管理">文档5管理</h5>
            <h1 id="文档1管理-1">文档1管理</h1>
            <p>测试</p>
            <h2 id="文档2管理-1">文档2管理</h2>
            <p>测试</p>
            <h3 id="文档3管理-1">文档3管理</h3>
            <p>测试</p>
            <h4 id="文档4管理-1">文档4管理</h4>
            <p>测试</p>
            <h5 id="文档5管理-1">文档5管理</h5>`;

    function getContentDirTree(htmlData) {
        if (!htmlData) {
            return [];
        }
        let hDomList = htmlData.match(
            /<h[1-6]{1}[^>]*>([\s\S]*?)<\/h[1-6]{1}>/g
        );
        if (!Array.isArray(hDomList)) {
            return [];
        }
        const dirTree = [];
        let preDir;
        hDomList.forEach((hDom, index) => {
            const startIndex = hDom.indexOf("id=\"");
            const endIndex = hDom.indexOf("\">");
            if (startIndex != -1 && endIndex != -1) {
                const domId = hDom.slice(startIndex + 4, endIndex);
                const re = /<h([1-6]{1})[^>]*>([\s\S]*?)<\/h[1-6]{1}>/
                let hLevel = Number(hDom.replace(re, "$1"));
                let titleContent = hDom.replace(re, "$2");
                // 有可能匹配到的是这样
                 //’我<strong>是</strong>h1<em>斜体</em>介绍‘ 
                //里面还有标签(直接去掉标签)
                let title = titleContent.replaceAll(/<([\s\S]*?)>|<\/([\s\S]*?)>/g, "");
                const currentDir = {
                    id: (index + 1),//用于点击的时候选中态
                    title,
                    domId,
                    hLevel
                }
                if (preDir) {
                    if (currentDir.hLevel > preDir.hLevel) {
                        currentDir.pid = preDir.id
                    } else if (currentDir.hLevel < preDir.hLevel) {
                        currentDir.pid = 0
                    } else {
                        currentDir.pid = preDir.pid
                    }
                } else {
                    currentDir.pid = 0;
                }
                preDir = currentDir;
                dirTree.push(currentDir)
            }
        })
        dirTree.forEach((item) => {
            if (item.pid !== 0) {
                const findParent = dirTree.find(i => i.id === item.pid);
                if (findParent) {
                    if (!Array.isArray(findParent.children)) {
                        findParent.children = []
                    }
                    findParent.children.push(item)
                }
            }
        })
        return dirTree.filter((i) => i.pid === 0);
    }

    const contentDirTree = getContentDirTree(htmlData);
    console.log(contentDirTree)

三.其他参考(可以参考里面的生成逻辑)

https://segmentfault.com/a/1190000040462508

今天的文章js获取标签里的文本内容_js获取div中的内容分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/83301.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注