Question

我这里有一个代码，使用Javascript查找并替换某个元素内的URL格式的字符串。一旦该元素内部存在匹配，它将重写除变量之外的整个URL。

基本上，我正在使用youtube网址，我想获取videoID，所以如果我用这种格式写入我的html元素这个网址：

youtube https://www.youtube.com/watch?v=6rar2-VAfOI

结果必须是

<b>videoID goes here</b>

问题是我无法获取视频网址。

请在此处查看我的示例代码。

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"  type="text/javascript"></script>

<div class="element">

youtube https://www.youtube.com/watch?v=IadsLclBOS8
<p>I am a text</p>

https://www.youtube.com/watch?v=RwZqhx8eSN4

https://www.google.com/

</div>

的Javascript

$("body .element").each(function () {

   var dataEXP = /youtube*.https:\/.[a-zA-Z]*.youtube.com\/watch\?v=/; 

   $(this).html( $(this).html().replace(

         new RegExp(dataEXP,'g'),

         '<b>return unmatch here</b>'

      )

   );

});

http://jsfiddle.net/leojarina/56y6cebL/

Answer 1

如果您仅使用YouTube链接，则可以使用substring()方法：

urlString = "https://www.youtube.com/watch?v=6rar2-VAfOI";

vidID = urlString.substring(33);

结果将是包括第33个字符在内的所有内容，所以：

"6rar2-VAfOI"

Answer 2

以下是识别youtube videoId的简化解决方案。这个正则表达式适用于各种youtube网址，以提取视频ID。

function getYoutubeVideoId(url){

  var regEx =/^.*(?:youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*/;

  return url.match(regEx)[1]; 
}

getYoutubeVideoId("https://www.youtube.com/watch?v=RwZqhx8eSN4"); // Returns RwZqhx8eSN4.

使用DOM中的videoId提取和替换youtube网址。

$("body .element").each(function () {

    var urlRegEx = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/gi;

    var $this = $(this);

    $this.html().match(urlRegEx).filter(function(url){
      $this.html($this.html().replace(url,getYoutubeVideoId(url)));
   });

});

以下是以html内容作为输入的实现：http://jsfiddle.net/valishah/m85n11ow/

使用Javascript从正则表达式返回不匹配的字符串？

2 个答案: