javascript - 我如何在 React Native 中解析 HTML 文件?

标签 javascript html react-native html-parsing

如何从文件系统获取 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>

最佳答案

使用 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');
});

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

关于javascript - 我如何在 React Native 中解析 HTML 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38343951/

相关文章:

react-native - 如何保持用户登录状态(使用 AsyncStorage 存储 userId)

reactjs - Expo-av 音频录制

javascript - 如何覆盖谷歌地图上的相对定位

javascript - 如何使用节点和父数据值设置基于 JSON 的树

javascript - Ember.JS 响应式模板

javascript - 如何用javascript执行点击功能?

html - CSS:在特定段落类中设置 `strong` 的颜色

javascript - Browserify 在多次 require 调用时仅执行一次模块代码

javascript - Angular JS 更新其他点击上的 ng-click 事件不起作用

android - react native android release apk无法从互联网接收数据