我在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);
});
当前回答
我不知道“鼻涕虫”这个词从何而来，但我们开始吧:
function convertToSlug(Text) {
return Text.toLowerCase()
.replace(/ /g, '-')
.replace(/[^\w-]+/g, '');
}
第一个replace方法将空格更改为连字符，第二，replace删除除字母数字、下划线或连字符以外的任何内容。
如果你不希望“like- this”变成“like- this”，你可以用这个:
function convertToSlug(Text) {
return Text.toLowerCase()
.replace(/[^\w ]+/g, '')
.replace(/ +/g, '-');
}
这将在第一次替换时删除连字符(但没有空格)，在第二次替换时将连续的空格压缩为单个连字符。
所以"like-this"就变成了"like-this"。
其他回答
你所需要的只是一个加号:)
$("#Restaurant_Name").keyup(function() {
var Text = $(this).val();
Text = Text.toLowerCase();
var regExp = /\s+/g;
Text = Text.replace(regExp,'-');
$("#Restaurant_Slug").val(Text);
});
//
// jQuery Slug Plugin by Perry Trinier (perrytrinier@gmail.com)
// MIT License: http://www.opensource.org/licenses/mit-license.php
jQuery.fn.slug = function(options) {
var settings = {
slug: 'slug', // Class used for slug destination input and span. The span is created on $(document).ready()
hide: true // Boolean - By default the slug input field is hidden, set to false to show the input field and hide the span.
};
if(options) {
jQuery.extend(settings, options);
}
$this = $(this);
$(document).ready( function() {
if (settings.hide) {
$('input.' + settings.slug).after("<span class="+settings.slug+"></span>");
$('input.' + settings.slug).hide();
}
});
makeSlug = function() {
var slug = jQuery.trim($this.val()) // Trimming recommended by Brooke Dukes - http://www.thewebsitetailor.com/2008/04/jquery-slug-plugin/comment-page-1/#comment-23
.replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase() // See http://www.djangosnippets.org/snippets/1488/
.replace(/\-{2,}/g,'-'); // If we end up with any 'multiple hyphens', replace with just one. Temporary bugfix for input 'this & that'=>'this--that'
$('input.' + settings.slug).val(slug);
$('span.' + settings.slug).text(slug);
}
$(this).keyup(makeSlug);
return $this;
};
这帮我解决了同样的问题!
<!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){
return text.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\u0100-\uFFFF\w\-]/g,'-') // Remove all non-word chars ( fix for UTF-8 chars )
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text
}
*基于https://gist.github.com/mathewbyrne/1280286
现在你可以转换这个字符串:
Barack_Obama Барак_Обама ~!@#$%^&*()+/-+?><:";'{}[]\|`
成:
barack_obama-барак_обама
应用于你的代码:
$("#Restaurant_Name").keyup(function(){
var Text = $(this).val();
Text = slugify(Text);
$("#Restaurant_Slug").val(Text);
});
接受的答案没有满足我的需求(它允许下划线，在开头和结尾不处理破折号，等等)，而其他答案有其他不适合我的用例的问题，所以这里是我想出的slugify函数:
function slugify(string) {
return string.trim() // Remove surrounding whitespace.
.toLowerCase() // Lowercase.
.replace(/[^a-z0-9]+/g,'-') // Find everything that is not a lowercase letter or number, one or more times, globally, and replace it with a dash.
.replace(/^-+/, '') // Remove all dashes from the beginning of the string.
.replace(/-+$/, ''); // Remove all dashes from the end of the string.
}
这将把' foo!!BAR_-_-_baz-'(注意开头的空格)变成foo-bar-baz。
