我在CodeIgniter的一个应用程序上工作，我试图使表单上的字段动态生成URL段塞。我想做的是删除标点符号，将其转换为小写字母，并将空格替换为连字符。比如，Shane's Rib Shack会变成shanes-rib-shack。
这是我目前所掌握的。小写部分很容易，但替换似乎根本不起作用，我也不知道要删除标点符号:
$("#Restaurant_Name").keyup(function() {
var Text = $(this).val();
Text = Text.toLowerCase();
Text = Text.replace('/\s/g','-');
$("#Restaurant_Slug").val(Text);
});
当前回答
<!DOCTYPE html>
<html>
<head>
<style>
fieldset.slugify {
color: #515151;
border: 1px solid #ccc;
padding: 15px;
}
.slugify legend {
font-size: 16px;
font-weight: 600;
padding: 0 10px;
}
.slugify input {
display: block;
padding: 8px;
margin: 8px;
}
.slug-output {
color: #05ab13;
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<form>
<fieldset class="slugify">
<legend>GeeksforGeeks</legend>
<label for="slug-source">Input Title: </label>
<input type="text" value="" id="slug-source" onkeyup="myFunction()" />
<label for="slug-target">URL Slug: </label>
<input type="text" value="" id="slug-target" />
<button type="button" >
Convert
</button>
<p>
<span class="slug-output">
Generated URL Slug
</span>:
<span id="slug-target-span"></span>
</p>
</fieldset>
</form>
<script>
function myFunction() {
var a = document.getElementById("slug-source").value;
var b = a.toLowerCase().replace(/ /g, '-')
.replace(/[^\w-]+/g, '');
document.getElementById("slug-target").value = b;
document.getElementById("slug-target-span").innerHTML = b;
}
</script>
</body>
</html>
其他回答
还有一个。短且保留特殊字符:
想象力是丛林=>想象力和丛林
function slugify (text) {
const a = 'àáäâãèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;'
const b = 'aaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------'
const p = new RegExp(a.split('').join('|'), 'g')
return text.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(p, c =>
b.charAt(a.indexOf(c))) // Replace special chars
.replace(/&/g, '-and-') // Replace & with 'and'
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, '') // Trim - from end of text
}
你所需要的只是一个加号:)
$("#Restaurant_Name").keyup(function() {
var Text = $(this).val();
Text = Text.toLowerCase();
var regExp = /\s+/g;
Text = Text.replace(regExp,'-');
$("#Restaurant_Slug").val(Text);
});
<!DOCTYPE html>
<html>
<head>
<style>
fieldset.slugify {
color: #515151;
border: 1px solid #ccc;
padding: 15px;
}
.slugify legend {
font-size: 16px;
font-weight: 600;
padding: 0 10px;
}
.slugify input {
display: block;
padding: 8px;
margin: 8px;
}
.slug-output {
color: #05ab13;
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<form>
<fieldset class="slugify">
<legend>GeeksforGeeks</legend>
<label for="slug-source">Input Title: </label>
<input type="text" value="" id="slug-source" onkeyup="myFunction()" />
<label for="slug-target">URL Slug: </label>
<input type="text" value="" id="slug-target" />
<button type="button" >
Convert
</button>
<p>
<span class="slug-output">
Generated URL Slug
</span>:
<span id="slug-target-span"></span>
</p>
</fieldset>
</form>
<script>
function myFunction() {
var a = document.getElementById("slug-source").value;
var b = a.toLowerCase().replace(/ /g, '-')
.replace(/[^\w-]+/g, '');
document.getElementById("slug-target").value = b;
document.getElementById("slug-target-span").innerHTML = b;
}
</script>
</body>
</html>
private string ToSeoFriendly(string title, int maxLength) {
var match = Regex.Match(title.ToLower(), "[\\w]+");
StringBuilder result = new StringBuilder("");
bool maxLengthHit = false;
while (match.Success && !maxLengthHit) {
if (result.Length + match.Value.Length <= maxLength) {
result.Append(match.Value + "-");
} else {
maxLengthHit = true;
// Handle a situation where there is only one word and it is greater than the max length.
if (result.Length == 0) result.Append(match.Value.Substring(0, maxLength));
}
match = match.NextMatch();
}
// Remove trailing '-'
if (result[result.Length - 1] == '-') result.Remove(result.Length - 1, 1);
return result.ToString();
}
看完这些答案后，我想到了这个。
const generateSlug = (text) => text.toLowerCase()
.trim()
.replace(/[^\w- ]+/g, '')
.replace(/ /g, '-')
.replace(/[-]+/g, '-');
