I am new to react js. I was supposed to achieve the following in my project:
My code:
function FindWord() {
const givenWord = "hello there click this Forgot password if you do not remember your password"
const toSearch="Forgot password"
return (
<>
{givenWord.includes(toSearch)?
givenWord.substring(0,givenWord.indexOf(toSearch).toString()) + `<span style={{color:'red'}}>${toSearch}</span>` + (toSearch)
:"No"}
</>
)
}
Is there a better approach?
This is a simple Linkify component/hook that accepts a string, and an object of { [text]: ref }. The hook splits the string along the links, and then maps the items to normal text or links, according to the exitance of href in the links object. The component renders the texts with a for links, and span for normal texts.
const { useMemo } = React
const useLinkify = (str, links) => useMemo(() =>
str
.split(new RegExp(`(${Object.keys(links).join('|')})`, 'g'))
.map((text, id) => ({
id,
href: links[text],
text
}))
, [str, links])
const Linkify = ({ str, links }) => {
const texts = useLinkify(str, links)
return texts.map(({ id, href, text }) => {
const Tag = href ? 'a' : 'span'
return <Tag key={id} href={href}>{text}</Tag>
})
}
const str = 'hello there click this Forgot password if you do not remember your password'
const links = { 'Forgot password': 'https://whatever.com' }
ReactDOM.render(
<Linkify str={str} links={links} />,
root
)<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>You have to surround the search string with an anchor tag like so:
const toSearch="Forgot password"
const target = givenWord.indexOf(toSearch);
const firstPart = givenWord.substring(0,target);
const secondPart = givenWord.substring(target + toSearch.length, givenWord.length)
return (
<>
{givenWord.includes(toSearch)?
<span>{firstPart}<a href="your-url.com" style={{color:'red'}}>${toSearch}</a>{secondPart}<span/>
:"No"}
</>
)
}