我有一个contentEditable DIV,我希望将任何用户输入的URL(通过将字符串与正则表达式匹配)替换为包含在span标记内的蓝色文本。
但是,不同的浏览器会返回不同的结果。此外,用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&-@_\+.~#?\/=]*)?/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>");
}
}
如何将光标设置在替换文本的末尾并继续使用默认颜色(黑色)键入?
答案 0 :(得分:0)
不是直接回答,而是建议以更简单的方式实现相同用户体验的另一种方式:
var regExUrl = /https?:\/\/([\w\d-\.]+)?[\w\d-\.]+\.{1}[\w]{1,4}((\/{1})?)([a-zA-Z0-9&-@_\+.~#?\/=]*)?/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;
}