在jQuery中拆分URL路径并获取其中的一部分

Question

我需要拆分用户输入的路径，并只抓取它的某个部分。 例如如果使用的路径为：

/content/mypath/myfolder/about/images/abc.jpg 

然后我只想显示images/abc.jpg。

我越来越

Uncaught Error: Syntax error, unrecognized expression

错误的时刻。

这里是我的代码。

$(document).ready(function(){ 
 
    $('#getData').click(function(){ 
 
    imgPath = $('#imgPath').val(); 
 

 
    console.log($(imgPath).split('/')); 
 

 
    //console.log(slicedPath); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
Image path: <input type="text" id="imgPath"> 
 
<button id="getData">Click</button>

Answer 1

$(imgPath)会试着找到其中imgPath是选择的元素。由于用户输入的路径不正确，它会引发错误。 例如，如果用户输入/content/mypath/myfolder/about/images/abc.jpg，则选择器将为$('/content/mypath/myfolder/about/images/abc.jpg')，这是无效的，因此是错误。

您可以使用正则表达式来获得图像路径

imgPath.match(/images\/.*$/i)[0] 

正则表达式匹配images/后跟任意数量的字符。 match返回一个数组，因此使用[0]将获得图像路径。

$(document).ready(function() { 
 
    $('#getData').click(function() { 
 
    var imgPath = $('#imgPath').val(); 
 

 
    console.log(imgPath.match(/images\/.*$/i)[0]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
Image path: <input type="text" id="imgPath" value="/content/mypath/myfolder/about/images/abc.jpg"> 
 
<button id="getData">Click</button>

Answer 2

您应该使用console.log(imgPath.split("/"))而不是console.log($(imgPath).split("/"))。

这里imgPath只是一个变量，它存储输入值，而不是用作$(imgPath)的dom元素。

Answer 3

我假设想要最后两个路径值。

$(document).ready(function(){ 
    $('#getData').click(function(){ 
    imgPath = $('#imgPath').val(); 

var theArray = imgPath.split('/'); // split path into parts 

// take the last two indexes to form short path 
var shortPath = theArray[theArray.length - 2] + '/' + 
       theArray[theArray.length - 1]; 


     }); 
});