Hướng dẫn how do i parse an html page in node js? - làm cách nào để phân tích cú pháp một trang html trong nút js?

Trình phân tích cú pháp HTML nhanh

FAST HTML SHARSER là một trình phân tích cú pháp HTML rất nhanh. Sẽ tạo ra một cây dom đơn giản hóa, với hỗ trợ truy vấn phần tử.

Theo thiết kế, nó dự định phân tích các tệp HTML lớn với giá thấp nhất, do đó hiệu suất là ưu tiên hàng đầu. Vì lý do này, một số HTML bị dị tật có thể không thể phân tích chính xác, nhưng hầu hết các lỗi thông thường đều được đề cập (ví dụ: kiểu HTML4 không đóng

html-parser     :24.1595 ms/file ± 18.7667
htmljs-parser   :4.72064 ms/file ± 5.67689
html-dom-parser :2.18055 ms/file ± 2.96136
html5parser     :1.69639 ms/file ± 2.17111
cheerio         :12.2122 ms/file ± 8.10916
parse5          :6.50626 ms/file ± 4.02352
htmlparser2     :2.38179 ms/file ± 3.42389
htmlparser      :17.4820 ms/file ± 128.041
high5           :3.95188 ms/file ± 2.52313
node-html-parser:2.04288 ms/file ± 1.25203
node-html-parser (last release):2.00527 ms/file ± 1.21317

html-parser     :24.1595 ms/file ± 18.7667
htmljs-parser   :4.72064 ms/file ± 5.67689
html-dom-parser :2.18055 ms/file ± 2.96136
html5parser     :1.69639 ms/file ± 2.17111
cheerio         :12.2122 ms/file ± 8.10916
parse5          :6.50626 ms/file ± 4.02352
htmlparser2     :2.38179 ms/file ± 3.42389
htmlparser      :17.4820 ms/file ± 128.041
high5           :3.95188 ms/file ± 2.52313
node-html-parser:2.04288 ms/file ± 1.25203
node-html-parser (last release):2.00527 ms/file ± 1.21317

Cài đặt

npm install --save node-html-parser

Lưu ý: Khi sử dụng trình phân tích cú pháp HTML nhanh trong dự án TypeScript, phiên bản TypeScript tối thiểu được hỗ trợ là

html-parser     :24.1595 ms/file ± 18.7667
htmljs-parser   :4.72064 ms/file ± 5.67689
html-dom-parser :2.18055 ms/file ± 2.96136
html5parser     :1.69639 ms/file ± 2.17111
cheerio         :12.2122 ms/file ± 8.10916
parse5          :6.50626 ms/file ± 4.02352
htmlparser2     :2.38179 ms/file ± 3.42389
htmlparser      :17.4820 ms/file ± 128.041
high5           :3.95188 ms/file ± 2.52313
node-html-parser:2.04288 ms/file ± 1.25203
node-html-parser (last release):2.00527 ms/file ± 1.21317

8.

Màn biểu diễn

-2022-08-10

html-parser     :24.1595 ms/file ± 18.7667
htmljs-parser   :4.72064 ms/file ± 5.67689
html-dom-parser :2.18055 ms/file ± 2.96136
html5parser     :1.69639 ms/file ± 2.17111
cheerio         :12.2122 ms/file ± 8.10916
parse5          :6.50626 ms/file ± 4.02352
htmlparser2     :2.38179 ms/file ± 3.42389
htmlparser      :17.4820 ms/file ± 128.041
high5           :3.95188 ms/file ± 2.52313
node-html-parser:2.04288 ms/file ± 1.25203
node-html-parser (last release):2.00527 ms/file ± 1.21317

Được thử nghiệm với HTMLPARSER-BENCEN.

Cách sử dụng

import { parse } from 'node-html-parser';

const root = parse('
Hello World
');

console.log(root.firstChild.structure);
// ul#list
//   li
//     #text

console.log(root.querySelector('#list'));
// { tagName: 'ul',
//   rawAttrs: 'id="list"',
//   childNodes:
//    [ { tagName: 'li',
//        rawAttrs: '',
//        childNodes: [Object],
//        classNames: [] } ],
//   id: 'list',
//   classNames: [] }
console.log(root.toString());
// 
Hello World
root.set_content('
Hello World
');
root.toString();	// 
Hello World

var HTMLParser = require('node-html-parser');

var root = HTMLParser.parse('
Hello World
');

Phương pháp toàn cầu

Parse (dữ liệu [, tùy chọn])

Phân tích dữ liệu được cung cấp và trả về gốc của DOM được tạo.

• Dữ liệu, dữ liệu để phân tích cú pháp, data to parse

• Tùy chọn, Tùy chọn phân tích cú pháp, parse options

  {
    lowerCaseTagName: false,  // convert tag name to lower case (hurts performance heavily)
    comment: false,            // retrieve comments (hurts performance slightly)
    voidTag:{
      tags: ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'],	// optional and case insensitive, default value is ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']
      addClosingSlash: true     // optional, default false. void tag serialisation, add a final slash 
  
    },
    blockTextElements: {
      script: true,	// keep text content when parsing
      noscript: true,	// keep text content when parsing
      style: true,		// keep text content when parsing
      pre: true			// keep text content when parsing
    }
  }

hợp lệ (dữ liệu [, tùy chọn])

Phân tích dữ liệu được cung cấp, trả về true nếu dữ liệu đã cho là hợp lệ và trả về sai nếu không.

Lớp

classDiagram
direction TB
class HTMLElement{
	this trimRight()
	this removeWhitespace()
	Node[] querySelectorAll(string selector)
	Node querySelector(string selector)
	HTMLElement[] getElementsByTagName(string tagName)
	Node closest(string selector)
	Node appendChild(Node node)
	this insertAdjacentHTML('beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' where, string html)
	this setAttribute(string key, string value)
	this setAttributes(Record~string, string~ attrs)
	this removeAttribute(string key)
	string getAttribute(string key)
	this exchangeChild(Node oldNode, Node newNode)
	this removeChild(Node node)
	string toString()
	this set_content(string content)
	this set_content(Node content)
	this set_content(Node[] content)
	this remove()
	this replaceWith((string | Node)[] ...nodes)
	ClassList classList
	HTMLElement clone()
	HTMLElement getElementById(string id)
	string text
	string rawText
	string tagName
	string structuredText
	string structure
	Node firstChild
	Node lastChild
	Node nextSibling
	HTMLElement nextElementSibling
	Node previousSibling
	HTMLElement previousElementSibling
	string innerHTML
	string outerHTML
	string textContent
	Record~string, string~ attributes
	[number, number] range
}
class Node{
	<>
	string toString()
	Node clone()
	this remove()
	number nodeType
	string innerText
	string textContent
}
class ClassList{
	add(string c)
	replace(string c1, string c2)
	remove(string c)
	toggle(string c)
	boolean contains(string c)
	number length
	string[] value
	string toString()
}
class CommentNode{
	CommentNode clone()
	string toString()
}
class TextNode{
	TextNode clone()
	string toString()
	string rawText
	string trimmedRawText
	string trimmedText
	string text
	boolean isWhitespace
}
Node --|> HTMLElement
Node --|> CommentNode
Node --|> TextNode
Node ..> ClassList

Phương pháp htmlelement

trimRight()

Trim phần tử từ bên phải (trong khối) sau khi nhìn thấy mẫu trong một văn bản.

removeWhitespace()

Loại bỏ khoảng trắng trong cây con này.

querySelectorAll(selector)

Truy vấn chọn bộ chọn CSS để tìm các nút phù hợp.

Lưu ý: Toàn bộ các bộ chọn CSS3 được hỗ trợ kể từ v3.0.0.

querySelector(selector)

Truy vấn chọn bộ chọn CSS để tìm nút phù hợp.

getElementsByTagName(tagName)

Nhận tất cả các yếu tố với tên tagname được chỉ định.

Lưu ý: Sử dụng * cho tất cả các yếu tố.

closest(selector)

Truy vấn phần tử gần nhất bởi bộ chọn CSS.

appendChild(node)

Nối một nút trẻ vào trẻ con

insertadjacenthtml (ở đâu, html)

Phân tích văn bản được chỉ định là HTML và chèn các nút kết quả vào cây dom ở một vị trí được chỉ định.

setAttribution (khóa: chuỗi, giá trị: chuỗi)

Đặt thuộc tính

html-parser     :24.1595 ms/file ± 18.7667
htmljs-parser   :4.72064 ms/file ± 5.67689
html-dom-parser :2.18055 ms/file ± 2.96136
html5parser     :1.69639 ms/file ± 2.17111
cheerio         :12.2122 ms/file ± 8.10916
parse5          :6.50626 ms/file ± 4.02352
htmlparser2     :2.38179 ms/file ± 3.42389
htmlparser      :17.4820 ms/file ± 128.041
high5           :3.95188 ms/file ± 2.52313
node-html-parser:2.04288 ms/file ± 1.25203
node-html-parser (last release):2.00527 ms/file ± 1.21317

import { parse } from 'node-html-parser';

const root = parse('
Hello World
');

console.log(root.firstChild.structure);
// ul#list
//   li
//     #text

console.log(root.querySelector('#list'));
// { tagName: 'ul',
//   rawAttrs: 'id="list"',
//   childNodes:
//    [ { tagName: 'li',
//        rawAttrs: '',
//        childNodes: [Object],
//        classNames: [] } ],
//   id: 'list',
//   classNames: [] }
console.log(root.toString());
// 
Hello World
root.set_content('
Hello World
');
root.toString();	// 
Hello World

Setattribut (attrs: Record)

Đặt các thuộc tính của phần tử.

removeAttribution (khóa: chuỗi)

Xóa thuộc tính

import { parse } from 'node-html-parser';

const root = parse('
Hello World
');

console.log(root.firstChild.structure);
// ul#list
//   li
//     #text

console.log(root.querySelector('#list'));
// { tagName: 'ul',
//   rawAttrs: 'id="list"',
//   childNodes:
//    [ { tagName: 'li',
//        rawAttrs: '',
//        childNodes: [Object],
//        classNames: [] } ],
//   id: 'list',
//   classNames: [] }
console.log(root.toString());
// 
Hello World
root.set_content('
Hello World
');
root.toString();	// 
Hello World

getAttribution (khóa: chuỗi)

Nhận thuộc tính

import { parse } from 'node-html-parser';

const root = parse('
Hello World
');

console.log(root.firstChild.structure);
// ul#list
//   li
//     #text

console.log(root.querySelector('#list'));
// { tagName: 'ul',
//   rawAttrs: 'id="list"',
//   childNodes:
//    [ { tagName: 'li',
//        rawAttrs: '',
//        childNodes: [Object],
//        classNames: [] } ],
//   id: 'list',
//   classNames: [] }
console.log(root.toString());
// 
Hello World
root.set_content('
Hello World
');
root.toString();	// 
Hello World

Exchangechild (OldNode: Node, NewNode: Node)

Trao đổi trẻ em với đứa trẻ mới.

removechild (nút: nút)

Xóa nút trẻ.

toString()

Giống như Outerhtml

set_content (nội dung: chuỗi | nút | nút [])

Đặt nội dung. THÔNG BÁO: Không đặt nội dung của nút gốc.Notice: Do not set content of the root node.

remove()

Loại bỏ phần tử hiện tại.

Thay thế (... nút: (chuỗi | nút) [])

Thay thế phần tử hiện tại bằng (các) nút khác.

Danh sách lớp

classList.add

Thêm tên lớp.

classList.Repace (cũ: chuỗi, mới: chuỗi)

Thay thế tên lớp bằng một tên khác.

classList.remove()

Xóa tên lớp.

classList.toggle (className: String): void

Chuyển đổi lớp học. Xóa nó nếu nó đã được bao gồm, nếu không thì thêm.

ClassList.Contains (ClassName: String): Boolean

Trả về đúng nếu ClassName đã có trong danh sách lớp.

classList.value

Nhận tên lớp.

clone()

Sao chép một nút.

getEuityById (id: chuỗi): htmlelement;

Nhận phần tử bằng ID của nó.

Thuộc tính htmlelement

chữ

Nhận giá trị văn bản không được phân loại của nút hiện tại và con cái của nó. Như

import { parse } from 'node-html-parser';

const root = parse('
Hello World
');

console.log(root.firstChild.structure);
// ul#list
//   li
//     #text

console.log(root.querySelector('#list'));
// { tagName: 'ul',
//   rawAttrs: 'id="list"',
//   childNodes:
//    [ { tagName: 'li',
//        rawAttrs: '',
//        childNodes: [Object],
//        classNames: [] } ],
//   id: 'list',
//   classNames: [] }
console.log(root.toString());
// 
Hello World
root.set_content('
Hello World
');
root.toString();	// 
Hello World

RAWTEXT

Được thoát ra khỏi giá trị văn bản (AS-IS) của nút hiện tại và con cái của nó. Có thể có

import { parse } from 'node-html-parser';

const root = parse('
Hello World
');

console.log(root.firstChild.structure);
// ul#list
//   li
//     #text

console.log(root.querySelector('#list'));
// { tagName: 'ul',
//   rawAttrs: 'id="list"',
//   childNodes:
//    [ { tagName: 'li',
//        rawAttrs: '',
//        childNodes: [Object],
//        classNames: [] } ],
//   id: 'list',
//   classNames: [] }
console.log(root.toString());
// 
Hello World
root.set_content('
Hello World
');
root.toString();	// 
Hello World

TagName

Nhận hoặc đặt tên thẻ của htmlelement. THÔNG BÁO: Giá trị trả về sẽ là chuỗi chữ hoa.

Cấu trúc

Nhận văn bản có cấu trúc.

kết cấu

Nhận cấu trúc DOM.

FirstChild

Nhận nút con đầu tiên.

con cuối cùng

Nhận nút con cuối cùng.

Nội tâm

Đặt hoặc nhận bên trong.

Outerhtml

Nhận bên ngoài.

Nextsibling

Trả về một tham chiếu đến nút con tiếp theo của cha mẹ của phần tử hiện tại.

NextErementsibling

Trả về một tham chiếu đến phần tử con tiếp theo của cha mẹ của phần tử hiện tại.

trước đó

Trả về một tham chiếu đến nút con trước của cha mẹ của phần tử hiện tại.

trước đây

Trả về một tham chiếu đến phần tử con trước của cha mẹ của phần tử hiện tại.

TextContent

Nhận hoặc đặt TextContent của phần tử hiện tại, hiệu quả hơn SET_Content.

thuộc tính

Nhận tất cả các thuộc tính của phần tử hiện tại. THÔNG BÁO: Không cố gắng thay đổi giá trị trả về.Notice: do not try to change the returned value.

phạm vi

Các chỉ mục bắt đầu và kết thúc mã nguồn tương ứng (IE [0, 40])