解析html格式的字符串中有几个html元素，并统计各个元素的个数_html统计个数

作者：AllinToyou | 2024-02-16 11:52:09

踩

html统计个数

题目

解析html格式的字符串中有几个html元素，并统计各个元素的个数，字符串如下

let a = `
<body>
    <script type="module" src="strings.m.js"></script>
    <cr-most-visited visible_=""></cr-most-visited>
    <script type="module" src="new_tab_page_third_party.js"></script>
    <button>button</button>
    <input type="text" />
    <div id="main-content" class="page-content" style="display: block;">
        <div class="page-title">
            <h1 class="page-title-text">New Tab</h1>
        </div>
    </div>
</body>
`
1
2
3
4
5
6
7
8
9
10
11
12
13
14

解答方法有三种，分别为

转化成dom树，然后根据树结构进行深度遍历统计元素个数
正则匹配
字符串 indexOf 查找元素符号 “<” 和 “>”

解法1

转化成 dom 树后进行深度遍历

// ...
let div = document.createElement("div")
div.innerHTML = a

function find(nodes) {
  Array.prototype.forEach.call(nodes, n => {
    if (n.nodeType === 1) {
      if (map[n.nodeName]) {
        map[n.localName] ++
      } else {
        map[n.localName] = 0
      }
      find(n.childNodes)
    }
  })
}

let map = {}
find(div.childNodes)
div = null
console.log(map)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

解法2

使用正则

// ...
let tags = a.match(/<\/\w+>|<[^<^>]*\/>/g) // 使用正则表达式匹配所有的HTML标签
let tagCount = {} // 用于存储每个标签的数量

if (tags) {
  // 如果找到了标签
  tags.forEach(tag => {
    let name
    if (tag.startsWith('</')) {
      name = tag.match(/<\/(\w+)>/)[1]
    } else {
      name = tag.match(/<(\w+).*\/>/)[1]
    }
    if (tagCount[name]) {
      // 如果已经统计过这个标签，增加数量
      tagCount[name]++
    } else {
      // 否则，初始化这个标签的数量
      tagCount[name] = 1
    }
  })
}
console.log(tagCount) // 输出各个标签的数量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

解法3 (推荐）

字符串 indexOf 查找元素符号 “<” 和 “>”

// ...

function main(string) {
  let start, end
  let str = string
  let map  = {}
  while((start = str.indexOf('<')) > -1) {
    if (str[start + 1] === '/') {
      str = str.slice(start + 2)
      continue
    }
    end = str.indexOf('>')
    if (end < start) {
      str = str.slice(start)
      continue
    }
    if (end > -1) {
      let tag = str.slice(start + 1, end)
      tag = tag.split(' ')[0]
      if (map[tag]) {
        map[tag]++
      } else {
        map[tag] = 1
      }
      str = str.slice(end + 1)
    } else {
      break
    }
  }
  return map
}
console.log(main(a))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/92913