how to display only tag in variable string,

const textHtml = "<h1>What events are you looking for today?</h1> <p>Find more events you want!</p>"

output : What events are you looking for today? Find more events you want!

expected : What events are you looking for today? just show the tag h1, the tag p, i won't the tag p is showing

and the output only display tag <h1> and the tag <p> is delete/not showing, cause value string of textHtml is a value from api response. And i don't how to display only the tag <h1>.

can anyone help me, please? And sorry for my bad english, thankyou

how to display only tag in variable string,

const textHtml = "<h1>What events are you looking for today?</h1> <p>Find more events you want!</p>"

output : What events are you looking for today? Find more events you want!

expected : What events are you looking for today? just show the tag h1, the tag p, i won't the tag p is showing

and the output only display tag <h1> and the tag <p> is delete/not showing, cause value string of textHtml is a value from api response. And i don't how to display only the tag <h1>.

can anyone help me, please? And sorry for my bad english, thankyou

• javascript
• html
• reactjs
• string
• tags

• If I am not correct, you want to remove the content of <p> element from textHtml ? – Rohìt Jíndal Commented Aug 30, 2022 at 13:56
• yes, i want to delete <p>, – BayBay Commented Aug 31, 2022 at 4:27
• I added an answer. Hope it will work as per your expectation. Thanks. – Rohìt Jíndal Commented Aug 31, 2022 at 6:08

5 Answers 5

As you want to remove the whole <p> element from the textHtml string. You can easily achieve it by using RegEx with the help of String.replace() method.

Live Demo :

const textHtml = "<h1>What events are you looking for today?</h1> <p>Find more events you want!</p>"

const res = textHtml.replace(/<p>*.*<\/p>/, '');

console.log(res);

<h1>What events are you looking for today?</h1>

You're storing multiple HTML elements in a string, but you'll likely want to wrap multiple elements in a <Fragment>, i.e.:

import { Fragment } from 'react'

const titleAndP = (
   <Fragment>
      <h1>What events are you looking for today?</h1>
      <p>Find more events you want!</p>
    </Fragment>
 )

You need to wrap the code. You can do it with empty tags (typical in ReactJS)

const html = (
    <>
        <h1>title</h1>
        <p>paragraph</p>
    </>
)

Try adding this under your code

<Markup content={textHtml} />

source: https://www.codegrepper./code-examples/html/display+string+with+html+tags+react+js