<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="jumbotron"> <h3>URL slicer</h3> <p>Gelen url yi / slash lara böler.</p> </div> <div class="form-group"> <label for="inputWord1">Kelime:</label> <input type="text" class="form-control" id="inputWord1" value="https://www.yuksekovahaber.com.tr/haber/yuksekovada-siddetli-ruzgar-hayati-olumsuz-etkiledi-299086.htm"> </div> <button id="method1" class="btn btn-primary btn-lg btn-block">Method1</button> <div class="form-group"> <label for="inputWord2">Kelime:</label> <input type="text" class="form-control" id="inputWord" value="https://www.yuksekovahaber.com.tr/haber/yuksekovada-siddetli-ruzgar-hayati-olumsuz-etkiledi-299086.htm"> </div> <button id="method2" class="btn btn-primary btn-lg btn-block">Method2</button> <div class="result-box" id="outputWord"> urlpart1/urlpart2 </div> </div>

body { background-color: #f0f2f5; padding-top: 50px; } .container { max-width: 500px; background-color: #ffffff; border-radius: 8px; padding: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .jumbotron { background-color: #007bff; color: #ffffff; text-align: center; border-radius: 8px; padding: 20px; } .result-box { text-align: center; font-size: 1em; font-weight: bold; color: #333; margin-top: 20px; padding: 10px; background-color: #e9ecef; border-radius: 4px; }

$(document).ready(function() { function urlParcala(url){ const diziUrl = []; const parts = url.split('/'); const urlkonu = parts[parts.length - 2]; diziUrl.push(urlkonu); const urlsayfa = parts[parts.length - 1]; diziUrl.push(urlsayfa); return diziUrl; } function urlExtract(url) { const tomar = new Map(); const parts = url.split('/'); const urlkonu = parts[parts.length - 2]; tomar.set("urlkonu", urlkonu); const urlsayfa = parts[parts.length - 1]; tomar.set("urlsayfa", urlsayfa); return tomar; } // method1 $("#method1").click(function(){ const adresimUrl = $('#inputWord1').val(); $('#outputWord').html("<b style='color:green'>" + urlParcala(adresimUrl)[0] + "/" + urlParcala(adresimUrl)[1] + "</b>" ); }); // method2 $('#method2').on('click', function() { const adresimUrl = $('#inputWord1').val(); const urlParts = urlExtract(adresimUrl); $('#outputWord').html("<b style='color:red'>" + urlParts.get("urlkonu") +"/"+ urlParts.get("urlsayfa")+ "</b>" ); }); });