如何检测用于创建 slug 的输入语言，如果不是英语，那么 slug 输入使用 javascript 保持为空答案

【问题标题】：how to detect input language for creating slug, if not English then slug input remain empty using javascript如何检测用于创建 slug 的输入语言，如果不是英语，那么 slug 输入使用 javascript 保持为空
【发布时间】：2020-09-07 22:52:59
【问题描述】：

我正在尝试获取标题输入并使用它创建 slug。但是如果标题不是用英文写的，比如“আমার প্রথম পোস্ট”，那么 slug 输入将保持为空。代码如下。希望有人能提供帮助。不擅长javascript。

document.getElementById("title").addEventListener("keyup", function() {
  if (/^[a-zA-Z]+$/.test(this.value)) {
    $(document).on('blur', '#title', function(){
        var TitleInput = $('#title').val().toLowerCase().trim();
        TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '-');
        var SlugInput = $('#slug').val(TitleInput);
    });
  } else {
    document.getElementById("show_lang_in_here").innerHTML = "Different language";
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
    <center>
        <h1>Form</h1>
        <form action="" method="post">
            <p>Title :</p>
            <input id="title" type="text"> <br>
            <br>
            <p>Slug :</p>
            <input id="slug" type="text">
        </form>

        <div id="show_lang_in_here"></div>

    </center>

</body>

</html>

【问题讨论】：

我不清楚你想要实现什么。是否支持其他语言的特殊字符？
得到了答案。请参阅已接受的答案。感谢您的回复。

标签： javascript slug

【解决方案1】：

我已经修改了你的代码来做我相信你所追求的，这些是主要的变化：

等待文档加载$(document).ready()
我已经扩展了您的正则表达式以允许数字和空格作为有效的英语/^[a-zA-Z0-9 ]+$/（您可以添加更多内容，很难准确检测出什么是有效的英语）
您在if 中创建了一个事件侦听器，而不是实际执行代码（您可以通过将多个事件包含在.on('keyup blur') 字符串中来侦听多个事件）

$(document).ready(function() {
  $('#title').on('keyup blur', function() {
    if (/^[a-zA-Z0-9 ]+$/.test($(this).val())) {
      var titleInput = $(this).val().toLowerCase().trim().replace(/[^a-z0-9-]+/g, '-');
      $('#slug').val(titleInput);
    } else {
      $('#show_lang_in_here').text('Different language');
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<center>
  <h1>Form</h1>
  <form action="" method="post">
    <p>Title :</p>
    <input id="title" type="text"> <br>
    <br>
    <p>Slug :</p>
    <input id="slug" type="text">
  </form>
  <div id="show_lang_in_here"></div>
</center>

【讨论】：

【解决方案2】：

你正在做的是替换为-

如果要删除所有内容，请将其更改为TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '');

document.getElementById("title").addEventListener("keyup", function() {
  if (/^[a-zA-Z]+$/.test(this.value)) {
    $(document).on('blur', '#title', function(){
        var TitleInput = $('#title').val().toLowerCase().trim();
        TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '');
        var SlugInput = $('#slug').val(TitleInput);
    });
  } else {
    document.getElementById("show_lang_in_here").innerHTML = "Different language";
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
    <center>
        <h1>Form</h1>
        <form action="" method="post">
            <p>Title :</p>
            <input id="title" type="text"> <br>
            <br>
            <p>Slug :</p>
            <input id="slug" type="text">
        </form>

        <div id="show_lang_in_here"></div>

    </center>

</body>

</html>

【讨论】：

不完全是我想要的。但感谢他的努力。 :)