Nhận id từ url javascript

Đô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 `https://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 đó ở đâ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)

Nhận id từ url trong javascript

Lần trước bạn đã dạy tôi cách thêm id từ url vào javascript
nhưng đoạn script này không hoạt động, tôi đã làm gì sai ????

Code: Select all

Mã. Chọn tất cả

var id_usr ='$_GET["id"]';

var player;
// Callback for when the YouTube iFrame player is ready
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    // Set Player height and width
    height: '390',
    width: '640',
    // Set the id of the video to be played
    videoId: '+id_usr',
    // Setup event handelers
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
      'onPlaybackQualityChange': onPlaybackQualityChange,
      'onPlaybackRateChange': onPlaybackRateChange,
      'onError': onError,
      'onApiChange': onApiChange,
    }
  });
};

JanMolendijk Bài đăng. 275

Tôi vẫn chưa hiểu cách lấy id trong videoid ???? . '+id',
// Set the id of the video to be played
videoId: '+id',

Mã. Chọn tất cả

// Returns an object with elements 'name: value' with data ftom URL (the 'name=value' pairs)
function getDataUrl(url) {
 // https://coursesweb.net/javascript
 var url_data = url.match(/\?([^#]*)/i)[1]; // gets the string between '?' and '#'

 // separate the data into an array, in case the are multiple pairs name=value
 var ar_url_data = url_data.split('&');

 // traverse the array, and adds into an object elements name:value
 var data_url = {};
 for(var i=0; i

Quản trị viên Bài đăng. 805

Đoạn mã sau lấy id từ url và lưu trữ nó trong biến id_video

Mã số. Chọn tất cả

// Returns an object with elements 'name: value' with data ftom URL (the 'name=value' pairs)
function getDataUrl(url) {
 // https://coursesweb.net/javascript
 var url_data = url.match(/\?([^#]*)/i)[1]; // gets the string between '?' and '#'

 // separate the data into an array, in case the are multiple pairs name=value
 var ar_url_data = url_data.split('&');

 // traverse the array, and adds into an object elements name:value
 var data_url = {};
 for(var i=0; i

videoId: id_video,

// Returns an object with elements 'name: value' with data ftom URL (the 'name=value' pairs)
function getDataUrl(url) {
 // https://coursesweb.net/javascript
 var url_data = url.match(/\?([^#]*)/i)[1]; // gets the string between '?' and '#'

 // separate the data into an array, in case the are multiple pairs name=value
 var ar_url_data = url_data.split('&');

 // traverse the array, and adds into an object elements name:value
 var data_url = {};
 for(var i=0; i