This content originally appeared on DEV Community and was authored by Kien Nguyen Chi
Introduction
This week, I work on an issue on a really large project. It is a JavaScript platform that implement a website for developers to publish blogs related to web development. You can take a look at the GitHub Repo.
Issue
I work on an existing Issue filed by an owner. It is about Highlighting of the Youtube video url in the Blog Preview.
Process
- First, I added HightlightedLink element in the page returning. This element will process the preview post text in props.posts to hightlight Youtube Link.
<HighlightedLink
text = {props.posts}
/>
- Second, after getting text into HightlightedLink element. I splitted the text by wherever has the youtube link.
var regexLink = new RegExp(`(${"^(https://www.youtube.com/).* $"})`, "gi");
var textParts = text.split(regexLink);
- Third, if there are youtube link. I added style attribute for span tag to color the link with blue. The other text would be put into a span tag with default black color.
return (
textParts.filter(String).map((part) => {
return regexLink.test(part) ? (
<span style="color:blue;">{part}</span>
) : (
<span>{part}</span>
);
})
);
- Otherwise, if there are no youtube link, I would return the whole text in a span tag.
return <span>{text}</span>;
Conclusion
It is interesting to work in a huge project like this, although you would fix just a small part of it.
Take a look at my pull request.
This content originally appeared on DEV Community and was authored by Kien Nguyen Chi
Kien Nguyen Chi | Sciencx (2021-11-18T19:44:13+00:00) Highlight the Youtube URL. Retrieved from https://www.scien.cx/2021/11/18/highlight-the-youtube-url/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.