javascript - Style some word to bold from a string in react native

Question

I'm fetching the product description from Wordpress rest api and get the description like this

      <p class="p1">
        <span class="s1">
          <b>Description: </b>
        </span>
        <span class="s2">
          Purifying hand cleansing gel with alcohol and organic moisturizing Aloe vera. It Purifies your hands
          without soap and water. No need to rinse
        </span>
      </p>
      <p class="p3">
        <span class="s1">
          <b>How to use</b>: Squeeze a small amount onto dry hands and rub until
        </span>
        <span class="s2">
          {' '}
          the gel is completely absorbed. Do not rinse. Repeat the application several times a day, whenever
          necessary.
        </span>
      </p>
      <p class="p3">
        <span class="s1">
          <b>Ingredients</b>:{' '}
        </span>
        <span class="s2">
          Alcohol Denat., Aqua, Propylene Glycol, Aloe Barbadensis Leaf Extract (*), Carbomer, Dmdm Hydantoin,
          Ethylhexylglycerin, Panthenol, Parfum, Peg/ppg-14/4 Dimethicone, Peg-60 Lanolin, Phenoxyethanol,
          Triethanolamine.
        </span>
      </p>
      <p class="p3">
        <span class="s2">(*) ORGANIC CERTIFIED</span>
      </p>
      <p class="p3">
        <span class="s1">
          <b>Benefit</b>:{' '}
        </span>
        <span class="s2">Sanitizing and moisturizing</span>
      </p>
      <p class="p2">
        <span class="s2">
          <b>Size</b>: 1000 ml
        </span>
      </p>

and removes the tags by replacing

const regex = /(<([^>]+)>)/ig;

now I have

Description: A salon quality shampoo that hydrates the hair. Ideal for natural, coloured or treated hair. It maintains the highest level of hair and scalp health using a delicate cleansing action. It will lengthen the duration of intense colour. It has a natural and fresh fragrance and improves the hair manageability, resulting in more shiny, thicker and softer hair. How to use: Apply a generous amount of product on the wet scalp and gently massage. Rinse and repeat if necessary, then proceed with the next treatment. Ingredients: Aqua [Water] (Eau), Sodium coceth sulfate, Cocamidopropyl betaine, Sodium chloride, Foeniculum vulgare (Fennel) oil, Citrus medica vulgaris peel oil, Lavandula angustifolia (Lavender) oil, Aloe barbadensis leaf extract (*), Calendula officinalis flower extract (*), Achillea millefolium flower/leaf/stem extract (*), Hydrolyzed soy protein, Sodium sunflower seeds amphoacetate, Decyl glucoside, Coco-glucoside, Glyceryl oleate, Glycerin, Lactic acid, Benzyl alcohol, Sodium benzoate, Sodium dehydroacetate, Limonene, Polyquaternium-10, Linalool. *organic ingredient Benefit: Color protection. Bright color for longer. Soft and silky hydrated hair. Size: 250 ml

I want to bold the heading which are bold in paragraph like description, how to use etc. and add some space between them. How can I achieve this.

question from:https://stackoverflow.com/questions/65849412/style-some-word-to-bold-from-a-string-in-react-native

Answer 1

I think the easiest solution is to parse HTML with react-native-html-view. Depends how much styling you want to attach or if you want to modify the string.