原生Javascript解析HTML（非DOM操作）

最新推荐文章于 2024-06-20 14:26:49 发布

SalmonellaVaccine

最新推荐文章于 2024-06-20 14:26:49 发布

阅读量1.3k

点赞数

分类专栏： Algorithm JavaScript

本文链接：https://blog.csdn.net/SalmonellaVaccine/article/details/43012715

版权

这篇博客探讨了如何在非DOM环境下使用JavaScript深度优先地解析HTML字符串，生成描述DOM元素的数组。作者详细解释了如何处理开始标签、结束标签、属性、内容，并提到了注释的处理。通过栈来解决内容归属问题，确保正确解析标签间的文本。文章涵盖了正则表达式匹配、字符串处理等技术点。

摘要由CSDN通过智能技术生成

一个小题目，用javascript解析HTML字符串。

具体要求如下：

1. 以深度优先的方式解析字符串，生成一个描述DOM元素的数组。

2. 数组中每个元素应该或者可能包括以下属性：

Tag type
ID
Class
自定义属性
内容

3. 忽略style

设定：

1. 所有tag默认闭合 //这个地方我不确定是所有tag都有结束标签，还是说也包括<img />这种。这里我是按前一种情况算的。

2. 在浏览器之外运行，也就是不能用js自带的DOM Parser。必须解析字符串。

举例：

输入：

"
<div>
    <ul id='myList'>
        <li class='hello'>Hello</li>
        <li customTag='Earth'>World</li>
    </ul>
</div>
<a href="http://www.csdn.com">Click</a>
"

输出：

[
    { 
        type: 'div'
    },
    {
        type: 'ul',
        id: 'myList'
    },
    {
        type: 'li',
        class: 'hello',
        content: Hello
    },
    {
        type: 'li',
        customTag: 'Earth',
        content: World
    },
    {
        type: 'a',
        href: 'http://www.csdn.com',
        content: 'Click'
    }
]

思路：

1. 识别开始标签、结束标签和属性要用正则表达式匹配。

2. 标签内部的内容容易解析，两个标签之间的内容也就是content，要特别的注意。内容出现的位置可能有四种情况：

开始标签、结束标签之间

开始标签、开始标签之间

结束标签、开始标签之间

结束标签、结束标签之间