2

http://jsfiddle.net/m45uM/

用 a 标签替换可以正常工作，但它会将我设置到可编辑 div 内的第一个位置。

我怎样才能解决这个问题？以及如何触发我当前将插入符号放置在 twitter 之类的标签内的事件？

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);
4

1 回答 1

0

在我尝试之前有几件事：

  1. 请不要将元素作为字符串添加到 dom 中 - “return ..”。您将很难使用此节点执行其他操作。相反，我建议您使用 DOM API (create/remove/replace/append/etc) 来执行这些功能。当您通读时，我的建议会很清楚。

  2. 您返回一个新字符串，然后盲目地将 HTML 设置为该特定字符串 - 您将丢失它之前的所有文本。示例：你好我的名字是@testuser1 变成了只有@ - 你失去了“你好我的名字是”

解决方案：

要处理胡萝卜放置，您必须记住用户的选择。注意 - 如果您更改 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）时，您需要将目标元素作为锚元素，并将偏移量作为锚元素内文本的长度。如果您使用 DOM API 并将此元素存储为变量，这会容易得多。

  • 您需要满足用户可能转到文本的任何部分并输入@username1 的情况；这应该相当简单。

您也可以使用 Rangy JS lib 来实现这一点。

玩得开心！

于 2013-09-03T22:16:16.330 回答