Javascript 像twitter一样，将插入符号放在可编辑div的末尾

用标记替换可以很好地工作，但它将我设置为可编辑div中的第一个位置

我怎样才能解决这个问题？我怎样才能触发一个事件，而我目前正将插入符号放在一个像twitter一样的a标签中

function replacer(match, p1, p2, p3, offset, string) {
    var name = '';
    var user = '';
    $.each(ar.data, function (i, item) {
        var keyword = match.substring(1, (match.length - 1));
        if (keyword == item.name) {
            user = item.user;
            name = item.name;
        }
    });
    return '<a href="/' + user + '">' + name + '</a>';
}
$(document).ready(function (e) {
    $('body').on('keyup', '#cont', function (e) {
        var cont = $('#cont').html();
        var cont2 = cont.replace(/\@\w+\s/gi, replacer);
        $('#cont').html(cont2);
        console.log($('#cont').html());
    });
});
var ar = {
    "data": [{
        "user": "testuser1",
            "name": "testname1"
    }, {
        "user": "testuser2",
            "name": "testname2"
    }]
};
console.log(ar);

函数替换器（匹配、p1、p2、p3、偏移、字符串）{
变量名=“”；
var user=''；
$。每个（应收账款数据、功能（i、项目）{
var关键字=match.substring（1，（match.length-1））；
if（关键字==项目名称）{
user=item.user；
name=item.name；
}
});
返回“”；
}
$（文档）.ready（函数（e）{
$（'body'）。关于（'keyup'，'#cont'，函数（e）{
var cont=$（'#cont'）.html（）；
var cont2=cont.replace（/\@\w+\s/gi，replacer）；
$（'#cont'）.html（cont2）；
log（$（'#cont'）.html（））；
});
});
var-ar={
“数据”：[{
“用户”：“testuser1”，
“名称”：“testname1”
}, {
“用户”：“testuser2”，
“名称”：“testname2”
}]
};
控制台日志（ar）；

在尝试此操作之前，我需要做几件事：

请不要将元素作为字符串“return..”添加到dom中。您将很难使用此节点执行其他操作。相反，我建议您使用domapi（创建/删除/替换/追加/等等）来执行这些功能。当你仔细阅读时，我的建议会很清楚

您返回一个新字符串，然后盲目地将HTML设置为该特定字符串-您将丢失它之前的所有文本。示例：Hello my name is@testuser1成为only@-您将丢失“Hello my name is”

解决方案：

要注意胡萝卜的放置，您必须记住用户的选择。注意-如果更改HTML，浏览器将丢失此选择；因此，您需要手动跟踪它

在“替换”文本之前，您可以通过以下方式获得选择：

//IE & Others
if (window.getSelection) {
    userSelection = window.getSelection();
} else if (document.selection) {
    userSelection = document.selection.createRange();
}
selectedNode = userSelection.anchorNode;
selectedOffset = userSelection.anchorOffset;

替换文本后，需要将所选内容设置回容器

//IE & Others


var range,
        selection;
    if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.setStart(targetElement, targetOffset);
        range.setEnd(targetElement, targetOffset);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection) {
        range = document.selection.createRange();
        range.moveToElementText(targetElement.parentElement);
        range.collapse(true);
        range.moveEnd('character', targetOffset);
        range.moveStart('character', targetOffset);
        range.select();
    }
}

目标元素和目标偏移量是要定位的节点和要光标定位的位置（从左侧）

既然基础已经结束，那么困难的部分就来了：

• 通过放入锚元素分解文本（TextNode）时，需要将目标元素作为锚元素，偏移量为锚元素内文本的长度。如果您使用domapi并将该元素存储为变量，那么这将更容易

• 您需要迎合用户可能进入文本任何部分并输入@username1的情况；这应该相当简单

您还可以使用rangyjslib来实现这一点

---

玩得开心

它的可能副本不是副本。看一看，我用的是一个div可编辑的，链接指的是一个文本框！应该是这个：@epascarello这个代码不起作用。它抛出了一个onkeyup为null的错误。@AnuradhaJayathilaka但twitter是如何做到的呢？