How to make specific text of a string bold if i marked in some way in react native?

Question

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!

you have to use [dangerouslySetInnerHTML](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml) after replacing them (use cautiously as the name itself suggest ) .... btw your English is really good - no apologies required as no one is an expert and native though — KcH, Oct 27 '22 at 10:37
[Render HTML in React Native](https://stackoverflow.com/questions/29334984/render-html-in-react-native) to use something similar to dangerouslySetInnerHTML in React Native — Sam Khachatryan, Oct 27 '22 at 10:39

FutureJJ · Accepted Answer · 2022-10-27T13:34:52.270

You could do something like the below code.

Step-wise details:

Split the text string around ** to create an array arr of string.
The string inside the **...** will be at odd indices in arr array.
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.
Append these Text components to an array.
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

score 1 · Answer 2 · answered Oct 27 '22 at 11:13

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

answered Oct 27 '22 at 11:13

Dmitriy Zhiganov

1,060
1
5
14

How to make specific text of a string bold if i marked in some way in react native?

2 Answers2