Estoy tratando de lograr este tipo de resultado:
De This is a test a this-is-a-test
Pero me gustaría implementar estas reglas:
à ç _ è - é ù .Por ahora estoy usando esta solución parcial:
const str = "This is dope"; const result = str.trim().replace(/\s+/g, "-").toLowerCase(); console.log(result) // this-is-dopePero esto no resuelve todo el problema porque no tiene todas las reglas que mencioné.
Agradezco cualquier ayuda en este asunto!
EDITAR: estoy usando React, y necesito implementar esta solución en un campo de entrada de la siguiente manera:
Usando la solución de mplungjan :
// state to hold the typed value const [text, setText] = useState(""); <input type="text" onChange={(e) => { setText( e.target.value .trim() .replace(/^-+|-+$/g, "") .replace(/[-\s]+/g, "-") .replace(/[^a-zA-Z0-9\-àç_èéù]/g, "") .toLowerCase() ); // unable to type spaces or dashes at all so far console.log(text); }} value={text} />Puedes usar
function App() { const [text, setText] = React.useState(''); function toKebabCase({ target: { value } }) { setText( value.replace(/[-\s]+/g, "-").replace(/^-/, '').replace(/[^a-zA-Z0-9àç_èéù-]+/g, "").toLowerCase() ) } return <div> Text: <input type='text' onChange={toKebabCase} value={text} /> </div> } ReactDOM.render(<App/>, document.querySelector('#root')) <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div> El value.replace(/[-\s]+/g, "-").replace(/^-/, '').replace(/[^a-zA-Z0-9àç_èéù-]+/g, "").toLowerCase()
- (con .replace(/[-\s]+/g, "-") ) y luego- (con .replace(/^-/, '') )_ , - , à , ç , è , é y ù (con .replace(/[^a-zA-Z0-9àç_èéù-]+/g, "") ).toLowerCase() ). const str = "- This is0 dope $$ !"; const result = str.toLowerCase().replace(/[^0-9a-z ]+/g,'').trim().replace(/\s+/g, '-'); console.log(result)