Search code examples
javascriptwordpressapireact-nativehtmlspecialchars

How do I remove HTML characters from the data fetched from a WordPress API endpoint in a React Native project?

I am working on a React Native project that requires that I fetch posts from a WordPress website, this is my code 

render() {
if (this.state.isLoading){
    return(
    <View style={{flex: 1, justifyContent: 'center',}}>
        <ActivityIndicator />
    </View>
    )
    }
    else{

let posts = this.state.data.map((post, index) => {
    function strip_html_tags(str)
    {
       if ((str===null) || (str===''))
           return false;
      else
       str = str.toString();
      return str.replace(/<[^>]*>/g, '');
    }

  return (
          <ListItem thumbnail key={index}>
            <Left>
              <Thumbnail square source={{ uri: post.jetpack_featured_media_url != null ? post.jetpack_featured_media_url : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAG1BMVEXMzMyWlpajo6PFxcW3t7ecnJyqqqq+vr6xsbGXmO98AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABPUlEQVRoge3Tv0/CQBjG8YcWaMcebymOENLI2MZoHMHEvVUKjq1K4lhM2Kvxx7/tUUiamDhc6GSez8INzbf3HleAiIiIiIiIiIiIiNozAGzvuJYTW2reXmso7bX8YN96HUR1a7RZ6+VVOgU+p4LuZGrSkqK0PWfwfl+3ht/hcpdvPkJ0g0fBYpYZtS7HttfPMatbAbZzJ1kjjnqVK1ihNzdpdX3b65S4qVsjXbG9EtuoEzliC/RbDFoIL7wY2NZrQayPzw1VpH/FUUqNjVrx0+9W8Rzrlt7yMMvMWq7fzHhoCTp6Rr0vw0uiH8+as69bov/AyNqf/Rms3Ky1aO7EYV93X2nlBIXg7WVSmrWs5q4eWrvVdYLbpR4/PTeZ8S9O82mdzMr7SVstV6mqrRaKh9ZSRERERERERET0n/wAZwMqI9kyPcoAAAAASUVORK5CYII=' }} />
            </Left>
            <Body>
              <Text>{strip_html_tags(post.title.rendered)}</Text>
              <Text note numberOfLines={2}>{strip_html_tags(post.excerpt.rendered)}</Text>
            </Body>
            <Right>
              <Button transparent>
                <Text>View</Text>
              </Button>
            </Right>
          </ListItem>
  );
});


The post rendered with some HTML special characters and I used this code to remove some 

    function strip_html_tags(str)
    {
       if ((str===null) || (str===''))
           return false;
      else
       str = str.toString();
      return str.replace(/<[^>]*>/g, '');
    }


But some won't go out. I still get this:

Screenshot

Solution

  • Solution is to use react-native-render-html or react-native-webview library. Wordpress rest api response contains some html tags so it need to remove this on App.