实时 Urlify 用户输入答案

【问题标题】：Urlify user input in real time实时 Urlify 用户输入
【发布时间】：2011-01-18 20:48:28
【问题描述】：

我想基本上有一个标题字段和一个 URL 字段的标题。

所以基本上用户输入了一个电影名称：“From Paris With Love”，它会在下面的字段中作为“from-paris-with-love”。

但是我想知道那里是否已经有类似的东西并且知道这里有人会知道！ ;)

亚伦

编辑：

http://www.thewebsitetailor.com/jquery-slug-plugin/ 完美！

【问题讨论】：

stackoverflow.com/questions/2292302/… 当然，您必须编写钩子才能使其实时隐蔽，但这并不难。

标签： jquery seo

【解决方案1】：

您可以使用 JavaScript 函数 encodeURIComponent，它将替换空格和任何其他不能在 URL 中使用的字符。

参考： https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference:Global_Functions:encodeURIComponent

【讨论】：

这对于许多场景来说似乎是理想的，因为它是 javascript 自己为 url 转换所做的。

【解决方案2】：

我在自己的应用程序中做了类似的事情。还有一些服务器端代码用于验证生成的值，但我创建了一个 JavaScript 助手来执行客户端“Urlify”。它将用 '-' 替换 ' '、':'、'\' 和 '/'，然后删除所有非字母数字字符，最后并排清理多个 '-' 的任何实例- 侧面。

function FormatForUrl(str) {
    return str.replace(/_/g, '-')
        .replace(/ /g, '-')
        .replace(/:/g, '-')
        .replace(/\\/g, '-')
        .replace(/\//g, '-')
        .replace(/[^a-zA-Z0-9\-]+/g, '')
        .replace(/-{2,}/g, '-')
        .toLowerCase();
};

示例

“Hello World”-“hello-world”
“这辆车花了 1700 美元”-“the-car-cost-1700”
“嘿，我们去街角商店吧。” - “嘿，让我们去街角商店”
“www.mywebsite.com/page1.html”-“wwwmywebsitecom-page1html”
“email@mywebsite.com”-“emailmywebsitecom”

【讨论】：

【解决方案3】：

一个非常简单的方法是删除所有带有破折号的非字母数字字符：

$(":input").bind("keyup", function(){
  $(".seo").text( $(this).val().replace(/[^a-z0-9]+/gi, "-") ); 
});

将 Jonathan say hello, world 转换为 jonathan-says-hello-world。

在线演示：http://jsbin.com/eqama/2/edit

【讨论】：

jonathan's text becomes this 将变为 jonathan-s-text-becomes-this

【解决方案4】：

Django 项目使用了一个很好的 urlify 库。我认为许可证是 BSD 或 MIT。你需要检查一下。你可以在这里找到它：http://code.djangoproject.com/browser/django/trunk/django/contrib/admin/media/js/urlify.js

该脚本将删除不必要的字符，将空格替换为破折号，并将重音和其他特殊字符替换为其他字符。

我在 jquery 中使用它的方式是检查标题文本框何时失去焦点并更新我的 url


//Note i have modify that URLify method to accept one argument instead of 2, don't need length
 $(document).ready(function() {
            $('#Title').focusout(function() {
                $('#Permalink').val(URLify($(this).val()));                
            });
        });

【讨论】：

【解决方案5】：

这是我用的。

$.fn.slug = function(){
    return this
            .val()
            .replace(/[^a-zA-Z 0-9-]+/g,'')
            .toLowerCase()
            .replace(/s/g,'-')
};

【讨论】：