Guys sorry for my English it's my second language.

So There's a string with the following text:

**Lorem** ipsum dolor sit, amet consectetur adipisicing elit.

How to replace "**" characters with <b> and </b> tags or <div> and </div> tags with React native, so i can output it like this:

<b>Lorem</b> ipsum dolor sit, amet consectetur adipisicing elit.

I tried to start bold text with ** and end with /*, and then replace ** with <b> and /* with </b> using replace method:

str.replace("/*", "</b>").replace("**", "<b>")

but i got only string like this:

<b>Lorem</b> ipsum dolor sit, amet consectetur adipisicing elit..

It's problematic because I'm using React native, which outputs only like string. It'd work in PHP.

Previously thanks!

CodePudding user response：

You could do something like the below code.

Step-wise details:

1. Split the text string around ** to create an array arr of string.
2. The string inside the **...** will be at odd indices in arr array.
3. So, wrap strings at odd indices with bold-styled Text component and other strings at even indices(i.e. which are outside the **...** block) with simple Text component.
4. Append these Text components to an array.
5. Render this array of Text components in another Text component to display all of them as a single component on the same line.

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const styles = StyleSheet.create({
  app: {
    width: "100%"
  },
  bold: {
    fontWeight: "bold"
  }
});

function App() {
  const text =
    "**Lorem** ipsum dolor sit, *amet consectetur **adipisicing** elit.";

  function getSmartBold() {
    // Split the text around **
    const arr = text.split("**");

    // Here we will store an array of Text components
    const newTextArr = [];

    // Loop over split text
    arr.forEach((element, index) => {
      // If its an odd element then it is inside **...** block
      if (index % 2 !== 0) {
        // Wrap with bold text style
        const newElement = <Text style={styles.bold}>{element}</Text>;
        newTextArr.push(newElement);
      } else {
        // Simple Text
        const newElement = <Text>{element}</Text>;
        newTextArr.push(newElement);
      }
    });

    return newTextArr;
  }

  return (
    <View style={styles.app}>
      <Text>{getSmartBold()}</Text>
    </View>
  );
}

export default App;

CodeSandbox link: https://codesandbox.io/s/happy-cori-oex9kg?file=/src/App.js

Edit: If you want the bold-text functionality to be smarter, you can check for stray texts which have dangling **. Code for the same:

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const styles = StyleSheet.create({
  app: {
    width: "100%"
  },
  bold: {
    fontWeight: "bold"
  }
});

function getSmartBoldText(text, boldWrapperText = "**") {
  // Split the text around **
  const splitStringArr = text.split(boldWrapperText);

  console.debug(`splitStringArr = `, splitStringArr);

  // Here we will store an array of Text components
  const textComponentsArr = [];

  // Loop over split text
  splitStringArr.forEach((string, index) => {
    // If its an odd element then it is inside **...** block
    // And is not a word surrounded by stray ** (without any closing)
    if (index % 2 !== 0 && index !== splitStringArr.length - 1) {
      // Wrap with bold text style
      const boldText = <Text style={styles.bold}>{string}</Text>;
      textComponentsArr.push(boldText);
    } else {
      // Simple Text

      // If it's stray element, append ** to it
      if (index === splitStringArr.length - 2) {
        string = string   boldWrapperText;
      }

      const normalText = <Text>{string}</Text>;
      textComponentsArr.push(normalText);
    }
  });

  return textComponentsArr;
}

function App() {
  const text =
    "**Lorem ipsum dolor sit, *amet consectetur **adipisicing **elit.";

  return (
    <View style={styles.app}>
      <Text>{getSmartBoldText(text, "**")}</Text>
    </View>
  );
}

export default App;

CodeSandbox link for smarter bold-text functionality: https://codesandbox.io/s/boring-haslett-238nt3?file=/src/App.js

CodePudding user response：

You can use react-native-webview

<WebView
  originWhitelist={['*']}
  source={{ html: '<b>Lorem</b> ipsum dolor sit, amet consectetur adipisicing elit.' }}
/>

Or any library for secure html insertion