如何将一个标题转换为jQuery的URL段塞?

我在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);  
});

当前回答

更强大的纯JavaScript段代码生成方法。它基本上支持所有西里尔字母和许多变音字母(德语、丹麦语、法语、土耳其语、乌克兰语等)的音译，但可以轻松扩展。

2017-09-12 10:47:08

其他回答

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);
});

2016-01-03 10:10:40

$("#Restaurant_Name").keyup(function() {
  var Text = $(this).val();
  Text = Text.toLowerCase();
  Text = Text.replace(/[^a-zA-Z0-9]+/g,'-');
  $("#Restaurant_Slug").val(Text);        
});

这段代码正在工作

2020-04-26 11:45:48

<!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>

2022-10-31 11:00:15

注意:如果你不关心反对公认答案的论点，只是在寻找答案，那么跳过下一节，你会在最后找到我建议的答案

公认的答案有几个问题(在我看来):

1)对于第一个函数段:

不考虑多个连续的空白

输入:这是一个好鼻涕虫

收到:————————好——蛞蝓

预期:is-it-a-good-slug

不考虑多个连续破折号

输入:————————好——蛞蝓

收到:————————好——蛞蝓

预期:is-it-a-good-slug

请注意，这个实现不处理外部破折号(或空白)，无论它们是多个连续的字符还是单数字符(据我所知，以及它们的用法)是无效的

2)对于第二个函数段:

它通过将多个连续的空白转换为单个空白来处理它们——但这还不够，因为外部(字符串的开头和结尾)空白的处理方式是相同的，所以is It -a-good slug将返回-is- It -a-good slug-

它还从输入中完全删除了破虚号，从而将诸如—is—It—a—good—slug—’之类的东西转换为isitaggoodslug， @ryan-allen评论中的代码片段处理了这一点，尽管没有解决外部破虚号问题

now I know that there is no standard definition for slugs, and the accepted answer may get the job (that the user who posted the question was looking for) done, but this is the most popular SO question about slugs in JS, so those issues had to be pointed out, also (regarding getting the job done!) imagine typing this abomination of a URL (www.blog.com/posts/-----how-----to-----slugify-----a-----string-----) or even just be redirected to it instead of something like (www.blog.com/posts/how-to-slugify-a-string), I know this is an extreme case but hey that's what tests are for.

在我看来，更好的解决办法是:

Const slugify = STR => str .trim() //删除字符串开头和结尾的空白 .toLowerCase () .replace(/^-+/g， "") //删除字符串开头的一个或多个破折号 .replace(/[^\w-]+/g， "-") //将任意字母数字字符转换为破折号 .replace(/-+/g， "-") //将连续破折号转换为单个破折号 .replace(美元/ - + / g, " ");//删除字符串末尾的一个或多个破折号

现在可能有一个RegExp忍者可以把它转换成一行表达式，我不是RegExp专家，我不是说这是最好的或最紧凑的解决方案，或具有最好的性能，但希望它可以完成工作。

2019-09-27 13:58:57

//
//  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;
    };

这帮我解决了同样的问题!

2013-02-17 21:48:07

如何将一个标题转换为jQuery的URL段塞?

推荐文章

最新文章

标签