如何检测用于创建 slug 的输入语言,如果不是英语,则使用 javascript slug 输入保持为空

how to detect input language for creating slug, if not English then slug input remain empty using javascript

我正在尝试获取标题输入并使用它创建 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>

我已经修改了你的代码来完成我认为你想要的,这些是主要的变化:

  • 等待文档加载$(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>

你正在做的是用 -

代替

如果要删除所有内容,请将其更改为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>