[英]get text under current cursor positon inside a textarea
is there a way to get a string under current cursor position inside a textarea有没有办法在文本区域内获取当前 cursor position 下的字符串
for example - click on lorem
- console should be lorem
例如 - 点击
lorem
- 控制台应该是lorem
essentially, something like this:本质上,是这样的:
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>
I was able to do this using selectionStart
as a key for the value of the textarea
.我能够使用
selectionStart
作为textarea
的值的键来做到这一点。 This way when we embed this into an event listener on click
, it will return the key
of the text string within the textarea
.这样,当我们将它嵌入到
click
事件侦听器中时,它将返回textarea
中文本字符串的key
。 We create a function that looks for a match of letters, if we have a match on the key where the cursor is placed, then we iterate backwards until there is no longer a letter, this gives us the beginning of the word.我们创建一个 function 来查找字母匹配,如果我们在放置 cursor 的键上匹配,然后我们向后迭代直到不再有字母,这给了我们单词的开头。 Then we reiterate forward until there is no match and push the values of the
textArea.value[key]
into an array, join
this array to create a string of the characters that make up that word.然后我们向前重复直到没有匹配并将
textArea.value[key]
的值推入一个数组, join
这个数组以创建一个组成该单词的字符的字符串。
Also need a conditional to make sure we are within the length of the string start and end, less an error is thrown as the value will be null
or undefined
.还需要一个条件来确保我们在字符串开始和结束的长度范围内,更少的错误被抛出,因为值将是
null
或undefined
。
I used an event listener that listens for a click
.我使用了一个监听
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>
You are wellcome,你好,
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);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.