Intentar reemplazar palabras específicas en un literal de cadena estática con el ejemplo de JSX y obtener un efecto secundario esperado. Sólo tiene efecto una palabra específica de las múltiples palabras.
import "./styles.css"; const Button = ({ children }) => <button>{children}</button>; const text = "some text with the word email and call in it"; export default function App() { const nodes = text .split(new RegExp(`(\\b${"email" && "call"}\\b)`, "i")) .map((node, i) => (i % 2 ? <Button>{node}</Button> : node)); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <p>{nodes}</p> </div> ); }También traté de mapear las palabras así:
import "./styles.css"; const Button = ({ children }) => <button>{children}</button>; const words = ["email", "call"]; const text = "some text with the word email and call in it"; export default function App() { const nodes = text .split(new RegExp(`(\\b${words.map((word) => word)}\\b)`, "i")) .map((node, i) => (i % 2 ? <Button>{node}</Button> : node)); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <p>{nodes}</p> </div> ); }Querrás usar la alternancia expresa regular para hacer coincidir cualquiera de varias palabras.
Si solo está codificando las palabras para reemplazar, use la siguiente expresión simplificada ...
text.split(/\b(email|call)\b/i);De lo contrario, si tiene una matriz de palabras, algo como esto debería funcionar
text.split(new RegExp(`\\b(${words.join("|")})\\b`, "i")); Los límites de palabras \b evitan que coincidas accidentalmente con palabras que contengan búsquedas como "emailing" o "calling" .