skip to Main Content

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!

2

Answers


  1. 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

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search