An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
November 18, 2021 07:44 pm GMT
Original Link: https://dev.to/kiennguyenchi/highlight-the-link-for-react-app-a1c
Highlight the Youtube URL
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.
Original Link: https://dev.to/kiennguyenchi/highlight-the-link-for-react-app-a1c
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To