给定一个 DIV w contenteditable，如何找到光标位置以提取子字符串

发布于 2024-12-13 04:53:20 字数 779 浏览 0 评论 0原文

给出：

<div id="comment_content_new" contenteditable="true" tabindex="0">
  <p>
     <span class="tag" id="tag30">theTag</span>&nbsp;@rac
  </p>
</div>

当光标位于@rac中的c之后时，我可以通过以下方式获取光标位置：

savedRange = window.getSelection().getRangeAt(0);

其中提供：

Range
 collapsed: true
 commonAncestorContainer: Text
 endContainer: Text
 endOffset: 5
 startContainer: Text
 startOffset: 5

我想要做的是给定光标位置，让所有内容向后移动，直到相对于光标位置的第一个@。鉴于该范围给了我错误的光标，我无法按照我一直在尝试的方式使用 .text() ，例如：

text = $('#comment_content_new p').text();
trigger = '@';
lastTriggerPosition = text.substring(0, cursorPosition).lastIndexOf(trigger);

关于如何实现这一点的任何想法？我意识到这不是一件容易的事！谢谢

原文

Given:

<div id="comment_content_new" contenteditable="true" tabindex="0">
  <p>
     <span class="tag" id="tag30">theTag</span> @rac
  </p>
</div>

When the cursor is after the c in @rac, I can get the cursor position with:

savedRange = window.getSelection().getRangeAt(0);

Which provides:

Range
 collapsed: true
 commonAncestorContainer: Text
 endContainer: Text
 endOffset: 5
 startContainer: Text
 startOffset: 5

What I want to be able to do is given the cursor position, get everything moving backwards until the first @, in relation to the cursor position. Given that range is giving me he wrong cursor, I can't use .text() the way I have been trying, something like:

text = $('#comment_content_new p').text();
trigger = '@';
lastTriggerPosition = text.substring(0, cursorPosition).lastIndexOf(trigger);

Any ideas on how I can pull this off? I realize it's not an easy one! thank you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏天碎花小短裙 2024-12-20 04:53:20

var str = text.substring(0, cursorPosition); // assumes this will give you the text in the div starting at the beginning and ending at the current cursor posistion.
var splitArr = str.split("@"); // splits the string into array of substrings with '@' as a delimiter.
var result = splitArr.pop(); // returns last item of array

怎么样？

String.split： http://www.w3schools.com/jsref/jsref_split.asp
Array.pop： http://www.w3schools.com/jsref/jsref_pop.asp

var str = text.substring(0, cursorPosition); // assumes this will give you the text in the div starting at the beginning and ending at the current cursor posistion.
var splitArr = str.split("@"); // splits the string into array of substrings with '@' as a delimiter.
var result = splitArr.pop(); // returns last item of array

How's that?

String.split: http://www.w3schools.com/jsref/jsref_split.asp
Array.pop: http://www.w3schools.com/jsref/jsref_pop.asp

回复收藏 0 原文