如何检测用于创建 slug 的输入语言，如果不是英语，那么 slug 输入使用 javascript 保持为空
Posted
技术标签:
【中文标题】如何检测用于创建 slug 的输入语言，如果不是英语，那么 slug 输入使用 javascript 保持为空【英文标题】：how to detect input language for creating slug, if not English then slug input remain empty using 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>【问题讨论】：
我不清楚你想要实现什么。是否支持其他语言的特殊字符？ 得到了答案。请参阅已接受的答案。感谢您的回复。 【参考方案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>【讨论】：
不完全是我想要的。但感谢他的努力。 :)以上是关于如何检测用于创建 slug 的输入语言，如果不是英语，那么 slug 输入使用 javascript 保持为空的主要内容，如果未能解决你的问题，请参考以下文章
wordpress：如何检查 slug 是不是包含特定单词？