我正在尝试从一个可编辑的div中提取单个单词,当鼠标点击时,它应该返回被选中的单词。例如:
我的代码:
一个函数绑定到contenteditable div的鼠标单击事件上,它计算插入符位置并找到前面和后面空格字符的索引(或者整个字符串的开头或结尾),然后使用substring确定单词。有一个快速的正则表达式匹配来删除标点符号和空白字符,最后得到正确的单词。
当contenteditable div中存在单个文本节点时,这很有效,但是一旦开始添加其他标签如br,该方法计算插入符位置的部分停止工作,始终将其计算为0。是否有一种类似于文本的HTML计算插入符位置的方法?
如果没有,有人能提出替代方法吗?
使用|代表光标,函数应该返回"consectetur"。Lorem ipsum dolor sit amet, cons|ectetur adipiscing elit. Cras vestibulum gravida tincidunt. Proin justo dolor, iaculis vulputate eleifend et, facilisis eu erat.*
我的代码:
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的鼠标单击事件上,它计算插入符位置并找到前面和后面空格字符的索引(或者整个字符串的开头或结尾),然后使用substring确定单词。有一个快速的正则表达式匹配来删除标点符号和空白字符,最后得到正确的单词。
当contenteditable div中存在单个文本节点时,这很有效,但是一旦开始添加其他标签如br,该方法计算插入符位置的部分停止工作,始终将其计算为0。是否有一种类似于文本的HTML计算插入符位置的方法?
如果没有,有人能提出替代方法吗?