如何使用Javascript制作强制图案

Question

我试图强制遵循模式，强制单词的第一个字母大写，其余字母小写，但是当我键入特殊字符时，它会将以下字符变为大写，并且我希望它在所有字符之后强制小写字母，除了每个单词的第一个字母。对我来说，它看起来应该有效。它看起来被正确编程为在空格处分割，而不是在特殊字符处分割。

document.addEventListener("DOMContentLoaded", function() {
  const displaynameInput = document.getElementById('display_name');

  function sanitizeDisplayNameInput() {
    let value = displaynameInput.value;

    const minLength = 2; // Minimum length for display name
    const maxLength = 50; // Maximum length for display name

    if (!/^[a-zA-Z]/.test(value)) {
      value = value.replace(/^[^a-zA-Z]+/, ''); // Remove all non-alphabet characters at the start
    }

    if (value.replace(/\s/g, '').length > maxLength) {
      value = value.substring(0, value.length - 1);
      displaynameInput.value = value;
      return;
    }

    value = value.replace(/^\s+/g, ''); // Remove leading spaces only

    value = value.replace(/\s{2,}/g, ' '); // Replace multiple spaces with a single space

    // Ensure the value is between min and max length
    if (value.replace(/\s/g, '').length < minLength || value.replace(/\s/g, '').length > maxLength) {
      document.getElementById("display_name-check-btn").style.display = "none";
    } else {
      document.getElementById("display_name-check-btn").style.display = "block";
    }

    // Remove any words with non-English characters
    value = value.replace(/[^\x00-\x7F]/g, '');

    // Split the value into words
    let parts = value.split(' ');

    // Process each part
    value = parts
      .map((word, index) => {
        if (word.length === 0) return ''; // Skip empty words

        // Convert the whole word to lowercase and then capitalize the first letter
        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();

        // Allow any other characters or numbers at the start of words
        return word;
      })
      .join(' '); // Rejoin the parts into a single string

    // Update the display name input with the sanitized value
    displaynameInput.value = value;
  }

  // Add event listeners
  displaynameInput.addEventListener('input', sanitizeDisplayNameInput);
  displaynameInput.addEventListener('blur', function() {
    sanitizeDisplayNameInput();
    // Remove trailing spaces when the user leaves the field
    displaynameInput.value = displaynameInput.value.trimEnd();
  });
});

.login form input[type="password"],
.login form input[type="text"],
.login form input[type="email"],
.register form input[type="password"],
.register form input[type="text"],
.register form input[type="email"] {
  width: 80%;
  height: 50px;
  border: 1px solid #dee0e4;
  border-left: 0;
  margin-bottom: 20px;
  padding: 0 15px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  outline: 0;

<input type="text" name="display_name" placeholder="Display Name"
id="display_name" required minlength="2" maxlength="50"
tabindex="3"
oninvalid="alert('Please enter a valid display name!');"
pattern="^[A-Z][a-z0-9\W_]*( (?! )([A-Z]|[0-9\W_])[a-z0-9\W_]*)*$">

<button class="availability" id="display_name-check-btn" type="button" onclick="checkDuplicate('display_name', document.getElementById('display_name').value)">Check Availability</button>

<input type="submit" value="Register" tabindex="6" id="submit" name="submit" style="margin-top:10px; width:400px;">

有人可以帮忙吗？这种形式在这里似乎不起作用，但你可以查看我的网站。我不知道我是否可以在这里发布它，但它在我的个人资料照片上。

Answer 1

使用这个：

function forceFirstLetterUpperCase(text) {
  let words = text.split(" ")
  let letterList = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
  words.map((word) => {
    let letters = word.split("")
    let firstDid = false
    letters.map((letter) => {
      if (!letterList.includes(letter)) {
        return letter // Skip specical characters 
      } else {
        if (!firstDid) { // First letter
          firstDid = true
          return letter.toUpperCase()
        } else { // Not first letter
          return letter.toLowerCase()
        }
      }
    })
    return letters.join(" ")
  })
}

此函数对于每个单词的每个字母（字符），它会跳过所有特殊字符，并将单词的第一个真实字母变为大写，其他字母变为小写。