CODEWITHSUNDEEP
javascriptreactjsstringsearchreact-hooks
Ars
Ars

Reputation: 37

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

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?

Upvotes: 2

Views: 5397

Answers (2)

Ori Drori
Ori Drori

Reputation: 191976

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>

Upvotes: 1

henk
henk

Reputation: 2838

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

Upvotes: 1

Related Questions