Javascript regex trích xuất url từ chuỗi

Đôi khi bạn thấy mình cần trích xuất ID từ một URL. Ví dụ: nếu người dùng cuối của bạn đang làm việc trong hệ thống CMS nơi họ có thể thêm video bằng cách nhập URL cho video, hãy giúp họ dễ dàng. Vấn đề với điều này là URL mà họ đang nhập không phải là URL bạn cần để tạo nhúng/iframe. Trong những trường hợp này, bạn sẽ cần trích xuất ID để có thể tự tạo URL nhúng

Để làm như vậy, chúng ta sẽ cần sử dụng các biểu thức chính quy. Biểu thức chính quy có thể thực sự mạnh mẽ để làm việc với. Nói ngắn gọn, các biểu thức chính quy về cơ bản là một chuỗi văn bản đặc biệt để mô tả một mẫu tìm kiếm. Tôi thích sử dụng một dịch vụ như. https. //regex101. com/ để kiểm tra các mẫu biểu thức chính quy của tôi

Trong trường hợp này, chúng tôi sẽ lấy chuỗi [Chuỗi mà người dùng đã nhập], áp dụng biểu thức chính quy và tìm ID, sau đó trả lại ID và tạo URL nhúng của riêng chúng tôi với ID

Điều đầu tiên chúng ta cần làm là tạo mẫu biểu thức chính quy mà chúng ta sẽ sử dụng để khớp với chuỗi được truyền cho hàm

Sau đó, chúng tôi sẽ khớp chuỗi với biểu thức chính quy và cuối cùng, trả về kết quả

const getYouTubeVideoIdFromUrl = [url: string] => {
  // Our regex pattern to look for a youTube ID
  const regExp = /^.*[youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=][[^#&?]*].*/;
  //Match the url with the regex
  const match = url.match[regExp];
  //Return the result
  return match && match[2].length === 11 ? match[2] : undefined;
};

Nhận ID từ một URL Vimeo rất giống với ví dụ trên với YouTube, chỉ với một mẫu biểu thức chính quy khác

const getVimeoIdFromUrl = [url: string] => {
  // Look for a string with 'vimeo', then whatever, then a
  // forward slash and a group of digits.
  const match = /vimeo.*\/[\d+]/i.exec[url];
  // If the match isn't null [i.e. it matched]
  if [match] {
    // The grouped/matched digits from the regex
    return match[1];
  }
};

Tạo URL nhúng của riêng bạn

Với các chức năng trên, giờ đây bạn có thể có các chức năng tạo URL của riêng mình cho YouTube và Vimeo

const generateYouTubeUrl = [videoId: string]: string => {
  return `//www.youtube.com/embed/${videoId}?autoplay=1&autohide=1&showinfo=0&modestbranding=1&controls=0&mute=0&rel=0&enablejsapi=1`;
};const generateVimeoUrl = [videoId: string]: string => {
  return `//player.vimeo.com/video/${videoId}?&autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1&#t=235s`;
};

Như bạn có thể nhận thấy, biểu thức chính quy là một công cụ mạnh mẽ khi làm việc với mã. Với các biểu thức chính quy, có thể tìm kiếm các tiêu chí rất cụ thể trong một chuỗi. Thực sự hữu ích và khả năng tìm kiếm/khớp các mẫu là rất lớn

Cảm ơn bạn đã đọc và tôi hy vọng bạn thích bài viết, nếu vậy, hãy giúp hỗ trợ tôi bằng cách nhấn nút vỗ tay hoặc đăng ký

Nếu bạn chưa phải là thành viên Medium, hãy cân nhắc trở thành một thành viên. Bạn có quyền truy cập vào nội dung tuyệt vời như thế này từ hàng ngàn tác giả. Nó giúp hỗ trợ các nhà văn và bạn cũng có cơ hội kiếm tiền bằng bài viết của mình. Đăng ký tại đây chỉ với $5 một tháng

Nếu bạn muốn đăng ký tất cả nội dung của tôi, bạn có thể làm điều đó tại đây

Ngừng sử dụng Khoảnh khắc. js cho Ngày - Đây là Giải pháp Thay thế Tốt hơn

Làm việc với đối tượng Date trong JavaScript có thể là một rắc rối thực sự. Nếu bạn không sử dụng thư viện ngày làm sẵn, bạn có thể…

jav. tiếng Anh đơn giản. io

10 lời khuyên tôi sẽ có khi còn trẻ với tư cách là một nhà phát triển

10 điều tôi sẽ có cho mình với tư cách là nhà phát triển giao diện người dùng và với tư cách là một con người

Blog. bitrc. io

Một cái nhìn sâu hơn về mảng. reduce[] với các ví dụ hữu ích

Nâng cao kỹ năng javascript của bạn và học cách sử dụng Array. nguyên mẫu. reduce[] với một số ví dụ hữu ích

trung bình. com

TypeScript Generics được giải thích trong 2 phút với các ví dụ

Tìm hiểu sâu về TypeScript Generics

jav. tiếng Anh đơn giản. io

Nếu đôi khi bạn muốn bắt kịp tôi, hãy theo dõi tôi trên Twitter. LinkedIn hoặc chỉ cần truy cập trang web của tôi [Đó là bằng tiếng Đan Mạch]

Xin chào @Adrian_Star,

Nó hoạt động… Cảm ơn bạn đã giúp đỡ…

Và một nghi ngờ nữa của tôi là…nếu có thêm văn bản sau khi kết thúc URL

Nếu tôi muốn dừng ở cuối URL “427409”. Làm cách nào tôi có thể thay đổi regex…

Hãy giúp tôi

Nhận toàn quyền truy cập vào Sách dạy nấu ăn biểu thức chính quy, Ấn bản thứ 2 và hơn 60 nghìn đầu sách khác, với bản dùng thử miễn phí 10 ngày của O'Reilly

Ngoài ra còn có các sự kiện trực tuyến trực tiếp, nội dung tương tác, tài liệu chuẩn bị chứng nhận, v.v.

Làm cách nào để trích xuất URL cơ sở từ một chuỗi trong JavaScript?

Làm cách nào để trích xuất URL từ chuỗi?

Làm cách nào để lấy văn bản URL trong JavaScript?

Làm cách nào để xác thực URL bằng regex trong JavaScript?