React.js: Find a string in a string and make it clickable if found-CodePudding

I am new to react js. I was supposed to achieve the following in my project:

Find a defined string in a large string
Make the defined link clickable if it is found in the large string

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?

CodePudding user response：

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"}
        </>
        
      )
    }

CodePudding user response：

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>