Hướng dẫn convert html to json react js - chuyển đổi html sang json phản ứng js

Tôi muốn chuyển đổi HTML mà tôi nhận được từ yêu cầu mạng thành JSON để tôi có thể dễ dàng đọc các giá trị. Nếu có cách đọc các giá trị trực tiếp từ HTML, vui lòng cho tôi biết trong một nhận xét tôi đã tìm thấy thư viện này: https://github.com/andrejewski/himalaya nhưng khi tôi cố gắng chạy ví dụ trong ứng dụng của tôi, tôi gặp lỗi Cannot read property prototype of undefined vì vậy tôi cho rằng thư viện này không hoạt động trong React-rative vì nó chứa mô-đun Node JS lõi. Đây là mã:
If there is a way to read values straight from HTML please let me know in a comment
I have found this library: https://github.com/andrejewski/himalaya
but when I try to run the example in my app I get the error Cannot read property prototype of undefined so I assume this library doesn't work in react-native because it contains a core Node JS module.
This was the code:

import {parse} from 'himalaya'
const html = this.state.html
const json = parse(html)
console.log('👉', json)

Một số ví dụ HTML có thể là:

  
Himalaya parsed me...
  

Đầu ra dự kiến ​​của HTML này là:

[{
  type: 'element',
  tagName: 'div',
  attributes: [{
    key: 'class',
    value: 'post post-featured'
  }],
  children: [{
    type: 'element',
    tagName: 'p',
    attributes: [],
    children: [{
      type: 'text',
      content: 'Himalaya parsed me...'
    }]
  }, {
    type: 'comment',
    content: ' ...and I liked it. '
  }]
}]

Có cách nào khác/thư viện để chuyển đổi HTML thành JSON trong React Native không?

[{
  type: 'element',
  tagName: 'div',
  attributes: [{
    key: 'class',
    value: 'post post-featured'
  }],
  children: [{
    type: 'element',
    tagName: 'p',
    attributes: [],
    children: [{
      type: 'text',
      content: 'Himalaya parsed me...'
    }]
  }, {
    type: 'comment',
    content: ' ...and I liked it. '
  }]
}]

Gaurav Singhal

Phát triển web phía trước

Giới thiệu

Nhiều ứng dụng web hiện đại có khả năng định dạng văn bản đầu vào, chẳng hạn như bằng cách thêm thụt lề, thay đổi kích thước phông chữ hoặc kiểu phông chữ, làm cho văn bản in đậm hoặc in nghiêng, v.v. Các ứng dụng này giữ lại định dạng của văn bản đó bằng cách lưu trữ nội dung cùng với đánh dấu của nó trong cơ sở dữ liệu. Sau đó, máy chủ trả lại toàn bộ đánh dấu dưới dạng chuỗi cho frontend, trả về các phần tử HTML từ JSON đó để hiển thị chúng trên trang.

Hướng dẫn này sẽ hướng dẫn bạn qua quá trình kết xuất các yếu tố HTML trực tiếp từ phản hồi JSON trên trang.

Sử dụng propinersetinnerhtml nguy hiểm

Trong React, bạn có thể đặt HTML bên trong của một thùng chứa bằng dangerouslySetInnerHTML prop. Vì vậy, nếu bạn đang sử dụng dòng JavaScript sau đây để đặt HTML bên trong của container

  
Himalaya parsed me...
  

  
Himalaya parsed me...
  

1const htmlDiv=document.querySelector('div');
2const htmlPart='
Welcome to this page
'
3htmlDiv.innerHTML=htmlPart;

JavaScript

... Bạn có thể làm tương tự bằng cách chuyển dangerouslySetInnerHTML prop cho container của bạn và chuyển một đối tượng cho nó bằng khóa

  
Himalaya parsed me...
  

  
Himalaya parsed me...
  

1import React from 'react';
2
3const RenderHTML=()=>{
4	const htmlPart='
Welcome to this page
'
5    return(
6      <div dangerouslySetInnerHTML={ {__html: htmlPart} } />
7    )
8}

JSX

Hãy xem xét việc thực hiện thực tế với một ví dụ chi tiết.

Thực hiện trong React

Trong ví dụ này, bạn sẽ tạo một phản hồi JSON giả chứa một số phần tử HTML dưới dạng chuỗi và đưa chúng trở lại DOM. Trường hợp sử dụng được thể hiện trong ví dụ này liên quan đến một cổng thông tin trong đó một nhà tuyển dụng đã đăng một công việc với một mô tả công việc được định dạng. Khi hiển thị công việc này cho người dùng, bạn phải hiển thị mô tả công việc với cùng định dạng như đã đăng.

Tạo Json giả

Bạn có thể chế giễu bất kỳ API nào bằng cách lưu trữ dữ liệu JSON của nó bên trong tệp JavaScript và xuất nó dưới dạng đối tượng. Tạo một tệp JavaScript trống được gọi là

  
Himalaya parsed me...
  

  
Himalaya parsed me...
  

1export default {
2    "Job Description":  "
 Supply Chain Manager @CargoChainzz Pvt Limited 

This job requires at least 3 years of experience
"
3}

JavaScript

... Bạn có thể làm tương tự bằng cách chuyển dangerouslySetInnerHTML prop cho container của bạn và chuyển một đối tượng cho nó bằng khóa

  
Himalaya parsed me...
  

Sử dụng propinersetinnerhtml nguy hiểm

Trong React, bạn có thể đặt HTML bên trong của một thùng chứa bằng dangerouslySetInnerHTML prop. Vì vậy, nếu bạn đang sử dụng dòng JavaScript sau đây để đặt HTML bên trong của container

  
Himalaya parsed me...
  

  
Himalaya parsed me...
  

1import data from './data';

JavaScript

... Bạn có thể làm tương tự bằng cách chuyển dangerouslySetInnerHTML prop cho container của bạn và chuyển một đối tượng cho nó bằng khóa

  
Himalaya parsed me...
  

  
Himalaya parsed me...
  

JSX

  
Himalaya parsed me...
  

  
Himalaya parsed me...
  

  
Himalaya parsed me...
  

  
Himalaya parsed me...
  

  
Himalaya parsed me...
  

1<div dangerouslySetInnerHTML={{__html:data["Job Description"]}}>div>

JSX

Hãy xem xét việc thực hiện thực tế với một ví dụ chi tiết.

Thực hiện trong React

Trong ví dụ này, bạn sẽ tạo một phản hồi JSON giả chứa một số phần tử HTML dưới dạng chuỗi và đưa chúng trở lại DOM. Trường hợp sử dụng được thể hiện trong ví dụ này liên quan đến một cổng thông tin trong đó một nhà tuyển dụng đã đăng một công việc với một mô tả công việc được định dạng. Khi hiển thị công việc này cho người dùng, bạn phải hiển thị mô tả công việc với cùng định dạng như đã đăng.

[{
  type: 'element',
  tagName: 'div',
  attributes: [{
    key: 'class',
    value: 'post post-featured'
  }],
  children: [{
    type: 'element',
    tagName: 'p',
    attributes: [],
    children: [{
      type: 'text',
      content: 'Himalaya parsed me...'
    }]
  }, {
    type: 'comment',
    content: ' ...and I liked it. '
  }]
}]

Bạn có thể chuyển đổi HTML thành JSON không?

Tôi có thể chuyển đổi HTML thành phản ứng không?

Làm thế nào chuyển đổi HTML thành văn bản trong React JS?

Làm thế nào kết xuất thẻ HTML trong React?