在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]; 


     }); 
});