如何在 React Native 中解析 html答案

【问题标题】：How to parse html in react native如何在 React Native 中解析 html
【发布时间】：2018-07-31 00:29:29
【问题描述】：

所以我有这种格式的html字符串：

Our society reflects, and is a reflection of, the <del>individual</del><add>person</add> (you and I) , and the <del>individual</del><add>person</add> is a <del>reflection</del><add>manifestation</add> of society (hologram/holon ).

我想把它们解析成像吹这样的节点：

Our society reflects, and is a reflection of, the 
<del>individual</del>
<add>person</add>
(you and I) , and the 
<del>individual</del>
<add>person</add>
is a 
<del>reflection</del>
<add>manifestation</add>
of society (hologram/holon ).

我知道你可以这样做：

var element = document.createElement( 'html' );
element.innerHTML = html
nodes = element.childNodes

但在本机反应中，我得到了can't find variable: document，看来我需要web-view 才能做到这一点。有没有其他方法可以解析这个字符串？

【问题讨论】：

标签： javascript html react-native

【解决方案1】：

您在这里有几个选项，就像您提到的那样，您可以像这样使用 WebView：

<WebView source={{html:"your_html_string"}} />

你也可以使用像这样的 npm 包：

https://github.com/archriss/react-native-render-html

或者您可以自己解析字符串，然后将其转换为带有<Text /> 元素的 JSX 标记

import { Text } from 'react-native';
import React, { Component } from 'react';

class del extends Text {
   render() {
      return (
          <Text style={{textDecoration:'line-through'}} ...this.props>{super.render()}</Text>
      )
   }
}

class add extends Text {
   render() {
      return (
          <Text style={{textDecoration:'underline line-through'}} ...this.props>{super.render()}</Text>
      )
   }
}

export default MyScreen extends Component {
    render() {
        return (
            <Text>"Our society reflects, and is a reflection of, the" 
            <del>"individual"</del>
            <add>"person"</add>
            "(you and I) , and the" 
            <del>"individual"</del>
            <add>"person"</add>
            "is a "
            <del>"reflection"</del>
            <add>"manifestation"</add>
            "of society (hologram/holon )."
            </Text>
        )
    }
}

【讨论】：

【解决方案2】：

https://github.com/meliorence/react-native-render-html

来自文档：

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

const source = {
  html: `
<p style='text-align:center;'>
  Hello World!
</p>`
};

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <RenderHtml
      contentWidth={width}
      source={source}
    />
  );
}

【讨论】：

【解决方案3】：

如果文本中既没有嵌套节点也没有<>s，那么一个快速而肮脏的解决方案是match子字符串以标签开头并以该标签结尾，或者不包含标签：

const str = `Our society reflects, and is a reflection of, the <del>individual</del><add>person</add> (you and I) , and the <del>individual</del><add>person</add> is a <del>reflection</del><add>manifestation</add> of society (hologram/holon ).`;
console.log(str.match(/<(\w+)>[^\<]+<\/\1>|[^<>]+/g))

如果你想从子字符串的开头和结尾修剪空格，那么也匹配那里的非空格：

const str = `Our society reflects, and is a reflection of, the <del>individual</del><add>person</add> (you and I) , and the <del>individual</del><add>person</add> is a <del>reflection</del><add>manifestation</add> of society (hologram/holon ).`;
console.log(str.match(/<(\w+)>[^\<]+<\/\1>|[^<>\s][^<>]+[^<>\s]/g))

但是找到一个真正的 XML 解析器来使用会是更好的通用选择。

【讨论】：