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

Question

有没有办法在文本区域内的当前光标位置下获取字符串
例如 - 点击 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>

Answer 1

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

还需要一个条件来确保我们在字符串开始和结束的长度范围内，因为值将是 null 或 undefined.[=22=，因此不会抛出错误。 ]

我使用了一个监听 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>

Answer 2

不客气，

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);
    });
});

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

get text under current cursor positon inside a textarea

javascript

jquery

textarea