Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 18, 2021 07:44 pm GMT

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:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To