获取文本区域内当前光标位置下的文本答案

【问题标题】：get text under current cursor positon inside a textarea获取文本区域内当前光标位置下的文本
【发布时间】：2021-02-16 23:57:08
【问题描述】：

有没有办法在文本区域内的当前光标位置下获取字符串
例如 - 点击lorem - 控制台应该是lorem
本质上是这样的：

  let a = previous space or line break from cursor position
  let b = next space or line break from cursor position
  console.log(text from a to b);

$('#ed').on('click', function(){
  //let a = previous space or line break from cursor position
  //let b = next space or line break from cursor position
  //console.log(text from a to b);
});

#ed{
display:block;
width:100%;
padding:9px;
height:50vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id='ed'>
lorem ipsum
https://google.com
</textarea>

【问题讨论】：

stackoverflow.com/a/9304990/9357872
@EvikGhazarian - 这是一个段落，不适用于 textarea
您是否要获取光标突出显示的字符串？

标签： javascript jquery textarea

【解决方案1】：

你很高兴，

var borderChars = [' ', '\n', '\r', '\t']
$(function() {
    $('textarea').on('click', function() {
        var text = $(this).html();
        var start = $(this)[0].selectionStart;
        var end = $(this)[0].selectionEnd;
        while (start > 0) {
            if (borderChars.indexOf(text[start]) == -1) {
                --start;
            } else {
                break;
            }                        
        }
        ++start;
        while (end < text.length) {
            if (borderChars.indexOf(text[end]) == -1) {
                ++end;
            } else {
                break;
            }
        }
        var currentWord = text.substr(start, end - start);
        console.log(currentWord);
    });
});

【讨论】：

【解决方案2】：

我能够使用 selectionStart 作为 @ 的值的 key 来做到这一点987654322@。这样，当我们将其嵌入到click 上的事件侦听器中时，它将返回textarea 中文本字符串的key。我们创建了一个查找字母匹配的函数，如果我们在光标所在的键上有一个匹配，那么我们向后迭代直到不再有字母，这给了我们单词的开头。然后我们向前重复直到没有匹配，并将textArea.value[key] 的值推入一个数组，join 这个数组创建一个组成该单词的字符串。

还需要一个条件来确保我们在字符串 start 和 end 的长度范围内，因为值将是 null 或 undefined，所以抛出的错误更少。

我使用了一个事件监听器来监听click。

const textArea = document.getElementById('textArea')
const display = document.getElementById('display')

const getSelectedText = () => {
  let key = textArea.selectionStart;
  const word = [];
  const letters = /^[A-Za-z]+$/;
  if (key < textArea.value.length && key > 0) {
    while (textArea.value[key].match(letters)) {
      key--
      if (key < 1) {
        while (textArea.value[key].match(letters)) {
          word.push(textArea.value[key])
          key++
        }
      } else if (textArea.value[key].match(letters) === null) {
        key++
        while (textArea.value[key].match(letters)) {
          word.push(textArea.value[key]);
          key++
        }
      }
    }
  }
  return word.join('');
}

textArea.addEventListener('click', () => {
  display.innerHTML = `<b>Your selected text is:</b> <i>${getSelectedText()}</i>`
})

<textarea id='textArea' rows="7" cols="50">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>

<div id="display"></div>

【讨论】：