鏈接contenteditable div

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

如果我正確地理解了這個問題，這應該讓你知道你在問什麼。

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

}

的幾個注意事項與它一起去：

• 在每一個KEYUP，你找一個「@」和剛按下的鍵是否是一個空格（ 32）。在這一點上，你有你的話來取代（根據你的標準）。
• 這使用html（）而不是text（），這很重要。如果你使用text（），你將最終取代所有以前的錨定標記。
• placeCaretAtEnd是直接從該SO職位：enter link description here

Answer 2

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

credit爲setEndOfContenteditable功能