Javascript contenteditable div中的链接

我正在尝试创建一个可编辑的div，定期检查键入的与

@text

匹配的任何文本（以@开头，以空格结尾）

因此，例如，如果用户要在此处键入

@text more text

，它会将以@开头并以空格结尾的单词更改为div中类似

more text here

的链接

我从JSFIDLE开始，但是，我无法让它工作：

HTML:

JS:

$（document）.on（'keyup'，.box'，function（））{
var text=$（this.text（）；
var regexp=/\B@（[^\B]+）/；
if（text.match（regexp））{
text=text.replace（/\B@（[^\B]+）/，“”）；
返回$（this）.html（文本）；
}
返回false；
});

---

请帮忙

如果我理解正确的话，这应该能满足你的要求

}

随附的几个注意事项：

• 在每个按键上，您都会查找“@”以及刚刚按下的键是否为空格（32）。在这一点上，你有你的话来取代（根据你的标准以上）
• 这将使用html（）而不是text（），这一点很重要。如果使用text（），最终将替换所有以前的定位标记
• placeCaretAtEnd直接来自此SO帖子：

$（document）.on（'keyup'，.box'，函数（e）{
如果（e.keyCode==32）{
var text=$（this.text（）；
var regexp=/（？=[@]）[*@]\w+/；
var newText=text.replace（regexp，函数（match）{
返回“”
});
$（this.html（newText）；
setEndOfContenteditable（此）；
}
});
函数setEndOfContenteditable（contentEditableElement）
{
var范围、选择；
if（document.createRange）//Firefox、Chrome、Opera、Safari、IE 9+
{
range=document.createRange（）；//创建一个范围（一个范围与所选内容类似，但不可见）
range.selectNodeContents（contentEditableElement）；//选择具有范围的元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
selection=window.getSelection（）；//获取选择对象（允许您更改选择）
selection.removeAllRanges（）；//删除所有已做的选择
selection.addRange（range）；//使刚刚创建的范围成为可见的选择
}
else if（document.selection）//IE 8及更低版本
{ 
range=document.body.createTextRange（）；//创建一个范围（范围与所选内容类似，但不可见）
range.moveToElementText（contentEditableElement）；//使用范围选择元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
range.select（）；//选择范围（使其成为可见选择
}
}

---

对于

setEndOfContenteditable

函数

您忘记在JSFIDLE中包含jQuery，而且

\B

与

\B

相反，它与单词边界不匹配。替换HTML将重置文本光标位置并中断撤消历史。此外，当您完成此操作时，应检查是否已替换

@texte> ，以避免反复将其包装在链接中。同样，将
\B
放置在字符类中也不会达到您期望的效果。不幸的是（这很接近！）如果你把一行文字移到一半，然后输入@something，光标就会随机移动到末尾。如果你开始在新行上输入，这些行就会连接在一起，各种奇怪的事情就会发生。
<div class="box" contenteditable="true"></div>

$(document).on('keyup', ".box", function() {
    var text = $(this).text();
    var regexp = /\B@([^\B ]+)/;
    if (text.match(regexp)) {      
        text = text.replace(/\B@([^\B ]+)/, '<a href="#">/\B@([^\B ]+)/</a> ');
        return $(this).html(text);
    }
    return false;
});

$(document).on('keyup', ".box", function(e) {
var text = $(this).html();
var firstAt = text.indexOf('@');

if(e.keyCode === 32 && firstAt > -1) {
    var textToReplace = text.substring(firstAt, text.len);
    //alert(textToReplace);
    var newText = "<a href='#'>" + textToReplace.substring(1, textToReplace.len) + "</a>";
    //alert(newText);
    var complete = text.replace(textToReplace, newText);
    //alert(complete);
    $(this).html(complete);        
    placeCaretAtEnd($(this).get(0));
}

function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
        && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
}

$(document).on('keyup', ".box", function(e) {
    if (e.keyCode == 32) {
        var text = $(this).text();
        var regexp = /(?=[@])[*@]\w+/;

        var newText = text.replace(regexp, function(match) {
            return '<a href="#">' + match + '</a>'
        });
        $(this).html(newText);
        setEndOfContenteditable(this);
    }
});

function setEndOfContenteditable(contentEditableElement)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
    }
}