实现textarea中匹配指定正则文本的选中功能遇到问题

Let's break down why your current code isn't working and walk through a working solution:

What's Wrong With the Original Code? #

• Incorrect selection method: ths.val().select(value) is invalid. $(this).val() returns a string, and strings don't have a select() method. The select() method belongs to the textarea's DOM element, and it doesn't accept arguments—it just selects the entire text content.
• Flawed text splitting: Using split(' ') creates problems with multiple spaces (you'll get empty string entries) and, more importantly, you lose track of each word's exact position in the original text. Without position data, you can't accurately select the matching word.
• No way to target the match: Even if you find a matching word in the split array, you have no way to map it back to its location in the textarea's full content to select it.

Working Solution #

Instead of splitting the text, we'll directly find the position of the matching pattern in the full text and use the textarea's native selection properties to highlight it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>word twowords threewords</textarea>

<script>
$('textarea').on('keyup', function() {
  // Grab the native textarea DOM element (we need its selection properties)
  const textareaEl = this;
  const fullText = textareaEl.value;
  const matchRegex = /threewords/g;
  
  let matchResult;
  // Find the first occurrence of our target pattern
  while ((matchResult = matchRegex.exec(fullText)) !== null) {
    // Set the selection range to cover the matched text
    textareaEl.selectionStart = matchResult.index;
    textareaEl.selectionEnd = matchResult.index + matchResult[0].length;
    // Ensure the textarea has focus so the selection is visible
    textareaEl.focus();
    break; // Stop after the first match—remove this if you want the last match instead
  }
});
</script>

Key Details About the Fix: #

• Native DOM element usage: We use this directly (instead of wrapping it in jQuery) because textarea's selectionStart and selectionEnd are properties of the native DOM element, not the jQuery object.
• Precise position tracking: The regex exec() method returns an object that includes index—the starting position of the match in the full text. This lets us exactly target where the matching text lives.
• Selection range setup: By setting selectionStart to the match's start index and selectionEnd to that index plus the length of the matched text, we tell the browser exactly which part of the text to highlight.
• Focus management: Calling focus() ensures the textarea is active, so the selected text appears highlighted to the user.

Optional Adjustments: #

• To match case-insensitively, change the regex to /threewords/gi.
• To select the last matching occurrence instead of the first, remove the break statement—this will loop through all matches and leave the last one selected.

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