Division d'un chemin d'URL dans jQuery et obtention d'une partie de celui-ci

Question

Je dois diviser le chemin entré par l'utilisateur et n'en saisir qu'une partie. Par exemple. si l'utilisation entre chemin comme:

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

Ensuite, je veux afficher uniquement images/abc.jpg.

Je reçois

Uncaught Error: Syntax error, unrecognized expression

erreur au moment.

Voici mon code.

$(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) va essayer de localiser l'élément dans lequel est imgPath sélecteur. Comme le chemin entré par l'utilisateur n'est pas le bon sélecteur, l'erreur est renvoyée. Exemple, si l'utilisateur entré /content/mypath/myfolder/about/images/abc.jpg le sélecteur sera $('/content/mypath/myfolder/about/images/abc.jpg') qui n'est pas valide exprès, donc l'erreur.

Vous pouvez utiliser RegEx pour obtenir le chemin d'image

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

L'expression rationnelle correspond à images/ suivi d'un nombre de caractères. match renvoie un tableau, donc en utilisant [0] obtiendra le chemin de l'image.

$(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

Vous devez utiliser console.log(imgPath.split("/")) au lieu de console.log($(imgPath).split("/")).

Ici imgPath est juste une variable qui stocke la valeur d'entrée et non un élément dom à utiliser comme $(imgPath).

Answer 3

Je suppose vouloir les deux dernières valeurs de chemin. `.val()` renvoie une chaîne, et non un élément DOM.

$(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]; 


     }); 
});