DIV contentEditableリンクの書式設定：入力時に入力時に追加を防ぐ方法を教えてください。

Question

URLリンクに一致しましたaタグをクリック可能なリンクタイプに置き換えました。一致したテキストを入力した後に.Textは間違った場所で入力します。また、すべてのテキストも追加されます。

は以下スニペットを参照してください：

を、彼らは、テキストの最後に常にアペンド&カーソルを防ぐために、どのように助けをappend.pleaseますdivの内側に何かを入力してください。

function testinf(that){ 
 
    var some=""; 
 
some =that.innerHTML.replace(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/g, function(match){ 
 
    return '<a href="'+match+'" target="_blank">'+match+'</a>'; 
 
}); 
 
    that.innerHTML=that.innerHTML; 
 
    that.innerHTML=some; 
 

 
console.log(some) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div oninput="testinf(this)" contentEditable="true">sone http://www.some.com type</div>

Answer 1

テキストを交換するときは、あなたの代わりにinnerHTMLで以下のようにtextContentを使用する必要があります。また、以下では、カーソルを最後まで移動するクロスブラウザーの方法を示しました。

function testinf(that){ 
 
    var some = ""; 
 
    some = that.textContent.replace(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/g, function(match){ 
 
    return '<a href="'+match+'" target="_blank">'+match+'</a>'; 
 
}); 
 
    //that.innerHTML=that.innerHTML; 
 
    that.innerHTML = some; 
 
    placeCaretAtEnd(that); 
 

 
console.log(some) 
 
} 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div oninput="testinf(this)" contentEditable="true">sone http://www.some.com type</div>