<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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">
<body>
<div class="container" style="font-family: 'Strait', sans-serif;">
<h2 class="text-center">Metni URL Formatına Çevir</h2>
<h4 class="text-center" id="sonuc">üçiİĞğ -> uciigg</h4>
<hr style="width:50%">
<div class="form-group row">
<div class="col-xs-10">
<input type="text" class="form-control input-lg" id="inputText" placeholder="input text here..">
</div>
<div class="col-xs-2">
<button class="btn btn-danger btn-lg btn-block" id="clear">Clear</button>
</div>
</div>
<small class="text-muted">
Karakter Sayısı: <span id="charCount">0</span>
</small>
<br/><br/>
<div class="well well-lg text-success clearfix">
<span id="result" style="line-height:34px;font-size:20px"> If a dog chews shoes, whose shoes does he choose</span>
<div class="pull-right">
<button class="btn btn-primary" id="convertBtn">Convert</button>
<button class="btn btn-success" id="copyBtn">Copy</button>
<button class="btn btn-danger" id="pasteBtn">Paste</button>
</div>
</div>
<div class="well well-lg text-success clearfix">
<span id="result1" style="line-height:34px;font-size:20px"> If-a-dog-chews-shoes-whose-shoes-does-he-choose</span>
<div class="pull-right">
<button class="btn btn-primary" id="convertBtn1">Convert</button>
<button class="btn btn-success" id="copyBtn1">Copy</button>
<button class="btn btn-danger" id="pasteBtn1">Paste</button>
</div>
</div>
</div>
</body>
$(document).ready(function () {
// Metni kopyala fonksiyonu (execCommand kullanıyor)
function copyToClipboard(text) {
var tempInput = $("<input>");
$("body").append(tempInput);
tempInput.val(text).select();
try {
var success = document.execCommand("copy");
if (success) {
$("#sonuc").html("<span style='color:green'>" + text + "</span> Panoya kopyalandı");
} else {
$("#sonuc").html("<span style='color:orange'>Kopyalama başarısız!</span>");
}
} catch (err) {
$("#sonuc").html("<span style='color:red'>Kopyalama desteklenmiyor!</span>");
// console.error("Kopyalama hatası:", err);
}
tempInput.remove();
}
// Metni URL formatına çevirme (SEO-Friendly)
function toSeoUrl(text, ch) {
var trMap = {
'ç': 'c', 'ğ': 'g', 'ı': 'i', 'ö': 'o', 'ş': 's', 'ü': 'u',
'Ç': 'c', 'Ğ': 'g', 'İ': 'i', 'Ö': 'o', 'Ş': 's', 'Ü': 'u'
};
return text.replace(/[çğıöşüÇĞİÖŞÜ]/g, function (match) {
return trMap[match];
}).toLowerCase().trim().replace(/['"`]/g, ch).replace(/[^a-z0-9\- ]/g, '').replace(/\s+/g, ch).replace(/-+/g, ch);
}
// Kopyala Butonu
$("#copyBtn").click(function () {
var textToCopy = $("#result").text();
if (textToCopy) {
copyToClipboard(textToCopy);
}
});
// Yapıştır Butonu
$("#pasteBtn").click(function () {
var gelen = $("#result").text();
$("#inputText").val(gelen).trigger("input"); // Yapıştırınca karakter sayacı güncellenir
});
// Kopyala Butonu
$("#copyBtn1").click(function () {
var textToCopy = $("#result1").text();
if (textToCopy) {
copyToClipboard(textToCopy);
}
});
// Yapıştır Butonu
$("#pasteBtn1").click(function () {
var gelen = $("#result1").text();
$("#inputText").val(gelen).trigger("input"); // Yapıştırınca karakter sayacı güncellenir
});
// Karakter Sayacı
$("#inputText").on("input", function () {
var charCount = $(this).val().length;
$("#charCount").text(charCount);
});
// Dönüştür Butonu
$("#convertBtn").click(function () {
var inputText = $("#inputText").val();
var seoUrl = toSeoUrl(inputText, ' ');
$("#result").text(seoUrl);
});
// Dönüştür Butonu
$("#convertBtn1").click(function () {
var inputText = $("#inputText").val();
var seoUrl = toSeoUrl(inputText, '-');
$("#result1").text(seoUrl);
});
$("#clear").click(function () {
$("#inputText").val("").focus();
});
});
