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

user_6259126 0
Viewed 560

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?

react-hooks reactjs search javascript string
2 Answers

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

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>

user_51574540
Related