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

Question

我有两个 HTML 输入字段 article 和 url。

如何将字段 'article' 条目复制到字段 'url' 到 SEO 友好链接！？

• url 允许的符号 a-z（大写字母转换为小写字母），
• url空格符号替换为破折号-，
• url 其他符号被忽略。

需要在article字段中输入

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

url 字段是 jquery 自动生成并由字段 article 值更新

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

Answer 1

这应该可行：

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

---

参考：.blur()、.val()、.toLowerCase()、.replace()

---

更新：

我会创建一个新函数，比如说update_URL()：

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

然后你可以在任何事件上调用这个函数，例如在keyup():

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