Update snippets
This commit is contained in:
@ -1,28 +1,31 @@
|
||||
---
|
||||
title: AutoLink
|
||||
tags: components,string,fragment,regexp,advanced
|
||||
tags: components,fragment,regexp,intermediate
|
||||
---
|
||||
|
||||
Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.
|
||||
Renders a string as plaintext, with URLs converted to appropriate link elements.
|
||||
|
||||
- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
|
||||
- Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.
|
||||
- Return matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary.
|
||||
- Render the rest of the string as plaintext.
|
||||
|
||||
```jsx
|
||||
const 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);
|
||||
const match = word.match(delimiter);
|
||||
if (match) {
|
||||
let url = match[0];
|
||||
return <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>;
|
||||
const url = match[0];
|
||||
return (
|
||||
<a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>
|
||||
);
|
||||
}
|
||||
return word;
|
||||
})}
|
||||
</React.Fragment>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user