Tengo un párrafo. en este párrafo tengo muchas cadenas de hashtags como #react, #cool, etc. Primero tengo que filtrar todas las cadenas de hashtags del párrafo y volver a colocar su posición original para que se pueda hacer clic.
Aporte
const str = "Soy john mike. Me encanta #reactProgramming. Tengo 2 años de experiencia en React Native Developer #ReactNative. #JS. Estoy trabajando en xyz Ltd. #xyz"
Producción
soy john mike Me encanta #reactProgramming . Tengo 2 años de experiencia en React Native Developer #ReactNative . #JS . Estoy trabajando en xyz Ltd. #xyz
Ahora, se puede hacer clic en todos los hashtags y si hacemos clic en un hashtag específico. debe registrar su propio valor como #JS.
Código:
import React,{useState,useEffect} from 'react' export default function App() { const str = "I am john mike . I love #reactProgramming. I have 2 years of experience in React Native Developer #ReactNative. #JS. I am working on the xyz Ltd. #xyz" const [data,setData]=useState([]); useEffect(() => { }); const getHashTag = ()=>{ const regexp = /\B\#\w\w+\b/g const result = str.match(regexp); if (result) { setData(result); } else { return false; } } return ( <div className="App"> <h1>{str}</h1> </div> ); }Puede lograr su objetivo utilizando el método de replace , pero en lugar de reemplazar la cadena original, puede usar el método de replace para generar sus elementos jSX y empujarlos a una matriz y luego renderizar su matriz, así:
const str = "I am john mike . I love #reactProgramming. I have 2 years of experience in React Native Developer #ReactNative. #JS. I am working on the xyz Ltd. #xyz"; function App() { const handleClickOnTag = (tag)=>{ alert(tag) } const renderTags = (str)=> { let result = []; let lastIndex = 0; const regexp = /\B\#\w\w+\b/g str.replace(regexp, (tag,tagIndex)=> { result.push(str.slice(lastIndex, tagIndex)); lastIndex = tagIndex + tag.length; result.push(<button key={tag} onClick={()=> handleClickOnTag(tag)}>{tag}</button>) }) return result; } return ( <div className="App"> <h1>{renderTags(str)}</h1> </div> ); } ReactDOM.render(<App />, document.getElementById('root')) button{ border: none; background: #ddd; padding: 8px; cursor:pointer; border-radius:3px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div>