使用JavaScript限制连写单词并拆分textarea中合并单词的方案

Great question—this is a common pain point with text input word counting, especially when users type quickly or forget spaces. Let's break this down into two parts: fixing existing concatenated words, and preventing new ones from being created in the first place.

The most reliable way to split merged words is to use a dictionary lookup, since regex alone can't handle all cases (like all-lowercase merged words such as "helloworld"). Here's how to implement this in JavaScript:

Dictionary-Based Dynamic Programming Solution #

This approach uses dynamic programming to find the optimal split of a string into valid words from a dictionary.

// Sample dictionary (expand this with a full word list for production)
const dictionary = new Set([
  'hello', 'world', 'foo', 'bar', 'javascript', 'stack', 'overflow'
]);

function splitConcatenatedWords(str) {
  const n = str.length;
  // dp[i] will store the best split for the first i characters
  const dp = Array(n + 1).fill(null);
  dp[0] = [];

  for (let i = 1; i <= n; i++) {
    // Iterate from end to start to prioritize longer words first
    for (let j = i - 1; j >= 0; j--) {
      const word = str.slice(j, i).toLowerCase();
      if (dp[j] && dictionary.has(word)) {
        dp[i] = [...dp[j], word];
        break;
      }
    }
  }

  return dp[n] ? dp[n].join(' ') : str; // Return original if no valid split exists
}

// Usage examples
console.log(splitConcatenatedWords('helloworld')); // Output: "hello world"
console.log(splitConcatenatedWords('foobarjavascript')); // Output: "foo bar javascript"

Notes: #

• For production, use a comprehensive word list (like a JSON file containing thousands of English words) instead of the sample set.
• This implementation prioritizes longer valid words, which reduces false splits for terms like "stackoverflow" vs. "stack overflow".

Quick CamelCase/PascalCase Split #

If your users often write in camelCase (e.g., "helloWorld") or PascalCase (e.g., "HelloWorld"), a regex can quickly insert spaces before uppercase letters:

function splitCamelCase(str) {
  return str
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2'); // Handle cases like "HTMLParser" → "HTML Parser"
}

console.log(splitCamelCase('helloWorldStackOverflow')); // Output: "hello World Stack Overflow"

This is fast but only works for cases with capitalization clues—use it alongside the dictionary method for better coverage.

To stop users from merging words in real-time, you can add input event listeners to the textarea that validate or auto-correct the input as they type.

Real-Time Auto-Correction with Dictionary Check #

This example listens for input changes, checks the current word (from the last space to the cursor), and splits it if it's a merged word:

const textarea = document.getElementById('word-count-textarea');

textarea.addEventListener('input', function() {
  const cursorPos = this.selectionStart;
  const text = this.value;
  // Find the start of the current word (last space before cursor)
  const wordStart = text.lastIndexOf(' ', cursorPos - 1) + 1;
  const currentWord = text.slice(wordStart, cursorPos);

  // Split the current word if it can be split into valid words
  const splitWord = splitConcatenatedWords(currentWord);
  if (splitWord !== currentWord) {
    // Update the textarea value
    this.value = text.slice(0, wordStart) + splitWord + text.slice(cursorPos);
    // Restore cursor position (adjust for added spaces)
    this.selectionStart = this.selectionEnd = wordStart + splitWord.length;
  }
});

Alternative: Enforce Space After Valid Words #

Another approach is to detect when a user finishes typing a valid word and automatically insert a space (add a toggle for this so users can opt out for technical terms or usernames):

textarea.addEventListener('keydown', function(e) {
  const cursorPos = this.selectionStart;
  const text = this.value;
  const wordEnd = cursorPos - 1;
  const wordStart = text.lastIndexOf(' ', wordEnd) + 1;
  const currentWord = text.slice(wordStart, wordEnd + 1).toLowerCase();

  // If the current word is in the dictionary and user is typing a letter, insert a space
  if (dictionary.has(currentWord) && /[a-zA-Z]/.test(e.key)) {
    e.preventDefault();
    this.value = text.slice(0, cursorPos) + ' ' + e.key + text.slice(cursorPos);
    this.selectionStart = this.selectionEnd = cursorPos + 2;
  }
});

Notes: #

• Always test edge cases like proper nouns, abbreviations, and non-English words if your user base is multilingual.
• Avoid over-correcting—give users control to disable auto-splitting when needed.

内容的提问来源于stack exchange，提问作者Ian Aleck