Created
July 22, 2019 05:56
-
-
Save Vterebenin/ae80cc0a96b113dc5d58eadcc5b614a1 to your computer and use it in GitHub Desktop.
компонент автоссылки/ autolink component#react
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ReactDOM.render( | |
| <AutoLink text='foo bar baz http://example.org bar' />, | |
| document.getElementById('root') | |
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function AutoLink({ text }) { | |
| const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi; | |
| return ( | |
| <React.Fragment> | |
| {text.split(delimiter).map(word => { | |
| let match = word.match(delimiter); | |
| if (match) { | |
| let url = match[0]; | |
| return ( | |
| <a href={url.startsWith("http") ? url : `http://${url}`}>{url}</a> | |
| ); | |
| } | |
| return word; | |
| })} | |
| </React.Fragment> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment