Javascript jQuery-字段输入-如何复制和转换为seo友好的url

我有两个HTML输入字段

article

和

url

如何将字段“article”条目复制到字段“url”以创建SEO友好链接

• url

  允许的符号

  a-z

  （大写字母转换为小写）

• url

  空格符号替换为破折号

  -

• url

  忽略其他符号

只需在字段

文章中键入所需内容

<input type="text" name="article">

这应该起作用：

function name_to_url(name) {
    name = name.toLowerCase(); // lowercase
    name = name.replace(/^\s+|\s+$/g, ''); // remove leading and trailing whitespaces
    name = name.replace(/\s+/g, '-'); // convert (continuous) whitespaces to one -
    name = name.replace(/[^a-z-]/g, ''); // remove everything that is not [a-z] or -
    return name;
}

然后

$('input[name=article]').blur(function() {
    $('input[name=url]').val(name_to_url($(this).val())); // set value
});

这将在每次文章字段失去焦点时在url字段中设置值

---

它在名称中保留已有的

-

。因此，如果您也想删除它们，则必须将

name\u的倒数第二行和倒数第三行更改为\u url（）

为：

name = name.replace(/[^a-z ]/g, ''); // remove everything that is not [a-z] or whitespace
name = name.replace(/\s+/g, '-'); // convert (continuous) whitespaces to one -

---

参考文献：

---

更新：

我将创建一个新函数，比如说，

update\u URL（）

：

然后，您可以在任何事件上调用此函数，例如在

keyup（）

：

---

谢谢你，菲利克斯·克林！它工作得很好！在“文章”中发生任何更改后，它是否能够更新“url”字段？不仅仅是当它失去焦点时。@Binyamin:当然，你必须使用

keyup（）

方法，而不是

blur（）

：|顺便说一句，你当然可以将

name\u中的方法链接到url

，比如

返回name.toLowerCase（）.replace（）.replace（）.replace（）

，但是为了解释我把它拆分了。。。另外，如果不希望url字段可编辑，请将HTML属性

readonly=“readonly”

添加到该字段。JS仍然有效。@Felix Kling:非常感谢！我添加了支持“[^a-z0-9א-תа-а-ž-]”的数字和其他一些语言。它工作得很好，希望编码也很好。你知道如何在字段“url”中显示两个字段组合“article”+“+”年（它不以这种方式工作-$（“input[name=article+name=year]”）！？@Felix Kling:再次感谢！我将

keyup（）

更改为

keypress（）

，这样它就不会显示Firebug警告“不应使用keyup事件的'charCode'属性。该值没有意义。”

name = name.replace(/[^a-z ]/g, ''); // remove everything that is not [a-z] or whitespace
name = name.replace(/\s+/g, '-'); // convert (continuous) whitespaces to one -

function update_URL() {
     var value = name_to_url($('input[name=article]').val()) + '-' + $('input[name=year]').val();
     $('input[name=url]').val(value)
}

$('input[name=article]').keyup(function() {
    update_URL();
});