contentEditable div替換url鏈接

我有一個contentEditable DIV，我想用包裹在span標記內的藍色文本替換任何用戶鍵入的URL（通過將字符串與正則表達式匹配）。contentEditable div替換url鏈接

但是，不同的瀏覽器返回不同的結果。此外，用span替換匹配的文本會將光標置於文本的開頭。這裏是鏈接：jsfiddle

CSS

.class{ 
    position:relative; 
    outline:none; 
    border:5px solid #96C; 
    font-size:16px; 
    width:500px; 
    height:60px; 
    padding:0px 2px; 
    word-wrap:break-word; 
}

HTML

<div class='class' id='div' contentEditable='true'></div>

的JavaScript

var regExUrl = /https?:\/\/([\w\d-\.]+)?[\w\d-\.]+\.{1}[\w]{1,4}(\/{1})?([a-zA-Z0-9&[email protected]_\+.‌~#?\/=]*)?/gi; 

var div = document.getElementById('div'); 

div.onkeyup = function() { 
    if (div.innerHTML.match(regExUrl)) { 
     st = div.innerHTML.match(regExUrl); 
     div.innerHTML = div.innerHTML.replace(regExUrl, "<span style='color:blue;text-decoration:underline'>" + st[0] + "</span>"); 

    } 
}

如何將光標置於替換文本的末尾，並繼續使用默認顏色（黑色）打印？

來源

2014-01-15 user1190478

考慮如何短代碼是，除了小提琴之外，請在這裏發佈，以便在回答這個問題時，它不依賴於外部鏈接。另外，你使用的是什麼版本的不同瀏覽器，他們做了什麼不同？ – zero298

@ zero298，例如，當我粘貼url時，IE v11刪除替換後的文本後鍵入的任何字符。所有瀏覽器（Opera，Chrome，Firefox，IE v8-11，Safari）都會繼續顯示以藍色替換後的文本。 – user1190478

只是一個FYI - 你的正則表達式可能簡化爲'/ https？：\/\ /（[ - \ w。] +）？[ - \ w。] + \。\ w {1,4} \ /？（[ - \ w＆@ +。〜＃？\/= = +）？/'假設您不是指'＆ - @'作爲最後一個類的範圍，而且這些Unicode嵌入字符不是真實的。 – sln

不是一個直接的答案，但在一個更簡單的方法實現相同的用戶體驗的另一種方式的建議：

http://jsbin.com/EZizIge/1/

var regExUrl = /https?:\/\/([\w\d-\.]+)?[\w\d-\.]+\.{1}[\w]{1,4}((\/{1})?)([a-zA-Z0-9&[email protected]_\+.‌~#?\/=]*)?/gi; 

var div = document.getElementById('div'); 

div.onkeyup = function(){ 
    if(div.innerHTML.match(regExUrl)){ 
    $("div").addClass("link"); 
    } else { 
    $("div").removeClass("link"); 
    } 
}

用CSS：

.link{ 
    text-decoration: underline; 
    color: blue; 
}

來源

2014-01-15 17:45:15

我已經嘗試過，它缺少的一件事是在以藍色顯示網址後，輸入的文本以藍色顯示。但謝謝你的回覆。 – user1190478

啊對 - 忘了那個要求。 –

有沒有解決方法？ – user1190478

contentEditable div替換url鏈接

回答

相關問題