如何在 React Native 中解析 HTML 文件？

Question

如何从文件系统获取 HTML 文件并从中解析特定元素。

例如，给定下面的 html 片段，我如何提取表格内容并呈现它？

 <html> <div> <h1>header</h1> <table id="a" border="1"> <th>Number</th> <th>content A</th> <th>contetn A</th> <th>content A</th> <tr> <td>1</td> <td>a</td> <td>a</td> <td>a</td> </tr> <th>Number</th> <th>content B</th> <th>content B</th> <th>content B</th> <tr> <td>1</td> <td>b</td> <td>b</td> <td>b</td> </tr> </table> </div> <br> <footer>footer</footer> </html>

Answer 1

只需使用 fetch() 下载 HTML，使用fast-html-parser对其进行解析，将结果写入状态并使用WebView呈现该状态

Answer 2

使用 fetch() 获取 html 并使用react-native-html-parser 解析，使用 WebView 处理和显示。

import DOMParser from 'react-native-html-parser';

fetch('http://www.google.com').then((response) => {
   const html = response.text();    
   const parser = new DOMParser.DOMParser();
   const parsed = parser.parseFromString(html, 'text/html');
   parsed.getElementsByAttribute('class', 'b');
});

其他答案中的 PS fast-html-parser 对我不起作用。 使用 react-native 0.54 安装时出现多个错误。

Answer 3

我会推荐使用这个库： react-native-htmlviewer 。 它采用 html 并将其呈现为本机视图。 您还可以自定义元素的呈现方式。

// only render the <table> nodes in your html
function renderNode(node, index, siblings, parent, defaultRenderer) {
  if (node.name !== 'table'){
    return (
      <View key={index}>
        {defaultRenderer(node.children, parent)}
      </View>
    )l
  }

}

// your html
const htmlContent = `<html></html>`;

class App extends React.Component {
  render() {
    return (
      <HTMLView value={htmlContent} renderNode={renderNode} />
    );
  }
}

Answer 4

我推荐这个包react-native-render-html ，非常有名并且使用起来非常简单

如何在 React Native 中解析 HTML 文件？

问题描述

4 个解决方案

解决方案1
4 已采纳 2016-07-19 04:30:27

解决方案2
3 2018-04-02 08:22:23

解决方案3
2 2019-03-12 20:46:09

解决方案4
0 2022-02-17 20:34:04

如何在 React Native 中解析 HTML 文件？

问题描述

4 个解决方案

解决方案1 4 已采纳 2016-07-19 04:30:27

解决方案2 3 2018-04-02 08:22:23

解决方案3 2 2019-03-12 20:46:09

解决方案4 0 2022-02-17 20:34:04

解决方案1
4 已采纳 2016-07-19 04:30:27

解决方案2
3 2018-04-02 08:22:23

解决方案3
2 2019-03-12 20:46:09

解决方案4
0 2022-02-17 20:34:04