Question

我正在尝试创建一个可编辑的div，它会定期检查所有与@text匹配的文本（以@开头并以空格结尾）。

例如，如果用户要键入@text more text here，则会更改以@开头的单词并以空格结尾，以及div中的<a href="#">@text</a> more text here之类的链接。

我已经开始使用JSFiddle，但是，我无法使其工作：http://jsfiddle.net/MpFXK/2/

HTML：

<div class="box" contenteditable="true"></div>

JS：

$(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;
});

请帮忙！

Answer 1

fiddle

$(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
    }
}

setEndOfContenteditable函数

的

credit

Answer 2

如果我正确理解了这个问题，这应该可以满足您的要求。

http://jsfiddle.net/MpFXK/4/

$(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();
}

}

附带一些注意事项：

在每个键盘上，你会找到一个'@'，以及按下的键是否是一个空格（32）。此时，您可以替换您的信息（根据您的上述标准）。
这使用html（）而不是text（），这很重要。如果您使用text（），最终将替换所有以前的锚标记。
placeCaretAtEnd直接来自此SO帖子：enter link description here

contenteditable div中的链接

2 个答案: