单击鼠标时,我试图从该位置的内容可编辑 div 中提取单个单词。例如:
Lorem ipsum dolor sit amet, cons|ectetur adipiscing elit. Cras vestibulum gravida tincidunt. Proin justo dolor, iaculis vulputate eleifend et, facilisis eu erat.*
使用| 表示插入符号,该函数应返回“consectetur”。
我的代码:
window.onload = function () {
document.getElementById("text-editor").onclick = function () {
var caretPos = 0, containerEl = null, sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == this) {
caretPos = range.endOffset;
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
if (range.parentElement() == this) {
var tempEl = document.createElement("span");
this.insertBefore(tempEl, this.firstChild);
var tempRange = range.duplicate();
tempRange.moveToElementText(tempEl);
tempRange.setEndPoint("EndToEnd", range);
caretPos = tempRange.text.length;
}
}
var prevSpace, nextSpace, text = this.innerText;
prevSpace = text.substring(0,caretPos).lastIndexOf(" ");
nextSpace = text.indexOf(" ", caretPos + 1);
nextSpace == -1 ? nextSpace = text.length - 1 : false;
prevSpace++;
console.log([prevSpace,caretPos,nextSpace].join("|"));
var word = text.substring(prevSpace, nextSpace);
//Removes punctuation and whitespace.
var patt = new RegExp("([A-Za-z0-9']*)","g");
word = patt.exec(word)[0];
document.getElementById("current-word").innerHTML = word;
};
};
contenteditable div的鼠标点击事件绑定(bind)了一个函数,它计算插入符号位置,然后找到前后空格字符(或字符串的开头或结尾)的索引,并使用子字符串来确定单词。有一个快速的正则表达式匹配来删除标点符号和空格,我们最终得到了正确的单词。
当 contenteditable div 中只有一个文本节点时,这工作得很好,但是当我开始放置和其他分类标签时,计算插入符号位置的方法部分停止工作,始终将其计算为 0 . 有没有办法像计算文本那样计算 HTML 中的插入符位置?
如果没有,谁能推荐一个替代方法?
最佳答案
您可以使用新的 TextRange module我的 Rangy 库为此,虽然它只是为了那个功能是巨大的矫枉过正。这是您需要的代码:
var sel = rangy.getSelection();
sel.expand("word");
var word = sel.text();
alert(word);
否则,如果您可以忍受不支持 pre-Blink Opera(最高版本 12)和 Firefox < 4,您可以使用 Selection.modify()
(WebKit、Firefox)和 expand()
TextRange
(IE) 的方法。这是一个例子。
演示:http://jsfiddle.net/timdown/dBgHn/1/
代码:
function getWord() {
var sel, word = "";
if (window.getSelection && (sel = window.getSelection()).modify) {
var selectedRange = sel.getRangeAt(0);
sel.collapseToStart();
sel.modify("move", "backward", "word");
sel.modify("extend", "forward", "word");
word = sel.toString();
// Restore selection
sel.removeAllRanges();
sel.addRange(selectedRange);
} else if ( (sel = document.selection) && sel.type != "Control") {
var range = sel.createRange();
range.collapse(true);
range.expand("word");
word = range.text;
}
alert(word);
}
关于javascript - 获取插入符所在的单词?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11247737/