Hướng dẫn fast html parser - trình phân tích cú pháp html nhanh

html-react-parser

Liberapay

HTMLReactParser(string[, options])

Teepsring

Giấy phép

MIT

Trình phân tích cú pháp chuyển đổi một chuỗi HTML thành một hoặc nhiều phần tử phản ứng.

• Cài đặt
• Cách sử dụng
  • thay thế
    • Thay thế bằng TypeScript
    • Thay thế yếu tố và trẻ em
    • Thay thế các thuộc tính phần tử
    • thay thế và xóa phần tử
  • thư viện
  • htmlparser2
  • Cắt
• Di cư
  • v3.0.0
  • v2.0.0
  • v1.0.0
• Câu hỏi thường gặp
  • XSS này có an toàn không?
  • HTML không hợp lệ có được vệ sinh không?
  • Các thẻ

    yarn add html-react-parser

    5 có được phân tích cú pháp không?
  • Thuộc tính không được gọi
  • Trình phân tích cú pháp ném lỗi
  • SSR có được hỗ trợ không?
  • Các yếu tố không được lồng chính xác
  • Không thay đổi trường hợp thẻ
  • Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'
  • Tôi có thể bật

    yarn add html-react-parser

    6 cho các yếu tố nhất định không?
  • Webpack xây dựng cảnh báo
• Màn biểu diễn
• Người đóng góp
  • Người đóng góp mã
  • Người đóng góp tài chính
    • Cá nhân
    • Tổ chức
• Doanh nghiệp
• Ủng hộ
• Giấy phép

Cài đặt

NPM:

npm install html-react-parser --save

Yarn:

yarn add html-react-parser

CDN:

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js">script>
<script src="https://unpkg.com/[email protected]/dist/html-react-parser.min.js">script>
<script>
  window.HTMLReactParser(/* string */);
script>

Cách sử dụng

Nhập hoặc yêu cầu mô -đun:

// ES Modules
import parse from 'html-react-parser';

// CommonJS
const parse = require('html-react-parser');

Phân tích phần tử đơn:

parse('
single
');

Phân tích nhiều yếu tố:

parse('
Item 1
Item 2
');

Đảm bảo hiển thị các phần tử liền kề được phân tích cú pháp trong phần tử cha:

<ul>
  {parse(`
    
Item 1
    
Item 2
  `)}
</ul>

Các yếu tố phân tích.

parse('
Lorem ipsum
');

Phần tử phân tích cú pháp với các thuộc tính:

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

thay thế

Tùy chọn

yarn add html-react-parser

Đối số đầu tiên của

yarn add html-react-parser

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

Đầu ra bảng điều khiển:

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

Phần tử được thay thế nếu phần tử phản ứng hợp lệ được trả về:valid React element is returned:

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

Thay thế bằng TypeScript

Đối với các dự án TypeScript, bạn có thể cần kiểm tra xem

yarn add html-react-parser

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js">script>
<script src="https://unpkg.com/[email protected]/dist/html-react-parser.min.js">script>
<script>
  window.HTMLReactParser(/* string */);
script>

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

Nếu bạn đang gặp sự cố, hãy xem ví dụ về ứng dụng Created React của chúng tôi.

Thay thế yếu tố và trẻ em

Thay thế các thuộc tính phần tử

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

thay thế và xóa phần tử

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

Thay thế các thuộc tính phần tử

thay thế và xóa phần tử

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

thay thế và xóa phần tử

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

thay thế và xóa phần tử

thư viện

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

thay thế và xóa phần tử

thư viện

CắtReact.

Di cư

XSS này có an toàn không?

npm install html-react-parser --save

HTML không hợp lệ có được vệ sinh không?

Các thẻ

yarn add html-react-parser

5 có được phân tích cú pháp không?do not work on the client-side (browser) and only works on the server-side (Node.js). By overriding

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js">script>
<script src="https://unpkg.com/[email protected]/dist/html-react-parser.min.js">script>
<script>
  window.HTMLReactParser(/* string */);
script>

4 options, universal rendering can break.

Thuộc tính không được gọi

Trình phân tích cú pháp ném lỗi

npm install html-react-parser --save

Cắt

Di cư

npm install html-react-parser --save

Câu hỏi thường gặp

npm install html-react-parser --save

XSS này có an toàn không?

npm install html-react-parser --save

HTML không hợp lệ có được vệ sinh không?

npm install html-react-parser --save

Các thẻ yarn add html-react-parser5 có được phân tích cú pháp không?

v3.0.0

Thuộc tính không được gọi

v2.0.0

Trình phân tích cú pháp ném lỗi

v1.0.0

SSR có được hỗ trợ không?

Các yếu tố không được lồng chính xác

npm install html-react-parser --save

Không thay đổi trường hợp thẻ

Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'

XSS này có an toàn không?

HTML không hợp lệ có được vệ sinh không?not XSS (cross-site scripting) safe. See #94.

HTML không hợp lệ có được vệ sinh không?

Các thẻ

yarn add html-react-parser

Thuộc tính không được gọi

Trình phân tích cú pháp ném lỗi

Thuộc tính không được gọi

Trình phân tích cú pháp ném lỗi

Trình phân tích cú pháp ném lỗi

SSR có được hỗ trợ không?

SSR có được hỗ trợ không?

Các yếu tố không được lồng chính xác

Các yếu tố không được lồng chính xác

Không thay đổi trường hợp thẻ

npm install html-react-parser --save

Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'

Không thay đổi trường hợp thẻ

Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'

npm install html-react-parser --save

Tôi có thể bật

yarn add html-react-parser

6 cho các yếu tố nhất định không?: By preserving case-sensitivity of the tags, you may get rendering warnings like:

yarn add html-react-parser

0

Webpack xây dựng cảnh báo

Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'

Tôi có thể bật

yarn add html-react-parser

Webpack xây dựng cảnh báo

Màn biểu diễn

Webpack xây dựng cảnh báo

Màn biểu diễn

yarn add html-react-parser

Người đóng góp

yarn add html-react-parser

Người đóng góp mã

Màn biểu diễn

Người đóng góp

Người đóng góp mã

yarn add html-react-parser

Giới hạn kích thước chạy:

Người đóng góp

Người đóng góp mã

Dự án này tồn tại nhờ tất cả những người đóng góp.[Đóng góp].

Người đóng góp tài chính

Trở thành người đóng góp tài chính và giúp chúng tôi duy trì cộng đồng của chúng tôi.[Đóng góp]

Cá nhân

Tổ chức

Hỗ trợ dự án này với tổ chức của bạn.Logo của bạn sẽ hiển thị ở đây với một liên kết đến trang web của bạn.[Đóng góp]

Doanh nghiệp

Có sẵn như một phần của đăng ký Tidelift.

Người bảo trì HTML-Reac-Parser và hàng ngàn gói khác đang làm việc với Tidelift để cung cấp hỗ trợ và bảo trì thương mại cho các gói nguồn mở mà bạn sử dụng để xây dựng các ứng dụng của mình.Tiết kiệm thời gian, giảm rủi ro và cải thiện sức khỏe của mã, trong khi trả cho người bảo trì các gói chính xác bạn sử dụng.Tìm hiểu thêm.

Ủng hộ

• Nhà tài trợ GitHub
• Mở tập thể
• TIDELIFT
• Patreon
• Ko-fi
• Liberapay
• Teepsring

Giấy phép

MIT