Cómo convertir cadenas HTML en objetos DOM: use DOMParser

1. Descripción del problema

A veces necesitamos procesar algunas cadenas HTML, por ejemplo, necesito extraer <a>el contenido y los atributos de cada etiqueta de la cadena HTML a continuación.

<pre>
	<a href="cc1245.jpg">cc1245.jpg</a>
	<a href="image.jpg">image.jpg</a>
	<a href="movie.mp4">movie.mp4</a>
</pre>

La coincidencia regular es posible, pero es muy problemática. Será mucho más conveniente convertirlo directamente en un objeto DOM y luego usar el conjunto de API para manipular DOM para procesarlo.

Operación DOM: nodo de elemento
https://wangdoc.com/javascript/dom/element

A continuación, convertimos la cadena anterior en un objeto DOM, luego dividimos <a>el contenido de cada etiqueta y lo transformamos en un objeto JSON, y luego hacemos otro procesamiento.

2. Cadena -> DOM


this.htmlContent = `上面的字符串`


let doc = new DOMParser().parseFromString(this.htmlContent, "text/xml") // 转换 string -> dom 对象
let linkDomList = doc.querySelector('pre').children  // 用 element API 获取其中的 pre 标签内的对象
for (let i = 0; i < linkDomList.length; i++) {
    
     // 遍历这个 children 并输出
    console.log(linkDomList[i])
}

No se preocupe por el valor que contiene href, lo he procesado.

resultado:
inserte la descripción de la imagen aquí

3.DOM -> JSON

Complementando el código anterior para extraer los datos en JSON, eso es todo:

let doc = new DOMParser().parseFromString(this.htmlContent, "text/xml")
let linkDomList = doc.querySelector('pre').children

   let linkArray = []

   for (let i = 0; i < linkDomList.length; i++) {
    
    
       let currentDom = linkDomList[i]
       linkArray.push({
    
    
           name: currentDom.textContent, // <a> 标签内的文字内容
           href: currentDom.getAttribute('href'), // <a> 标签的 href 属性
       })
   }
   console.log(linkArray)

resultado:
inserte la descripción de la imagen aquí