Soy nuevo para reaccionar js. Se suponía que debía lograr lo siguiente en mi proyecto:
Mi código:
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"} </> ) }¿Hay un mejor enfoque?
Este es un componente/gancho de Linkify simple que acepta una cadena y un objeto de { [text]: ref } . El gancho divide la cadena a lo largo de los enlaces y luego asigna los elementos a texto o enlaces normales, de acuerdo con la existencia de href en el objeto de links . El componente representa los texts con enlaces for a span para textos normales.
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>Tienes que rodear la cadena de búsqueda con una etiqueta de anclaje como esta:
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"} </> ) }