Question

我是匹配的url链接并使用一些正则表达式将a标记替换为可点击的链接类型。它工作正常。匹配的文本应用于输入.Text将输入错误的地方。还有所有文本将附加。

请参阅以下代码段：

请在他们将附加的div中键入内容。请帮助如何防止附加＆amp;光标始终带有文本的结尾。

function testinf(that){
  var some="";
some =that.innerHTML.replace(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/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

替换文字后，您必须使用textContent，而不是innerHTML。另外，我在下面给出了一个跨浏览器方法来将光标移动到最后。

＆＃13;

function testinf(that){
  var some = "";
  some = that.textContent.replace(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/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();
    }
}

＆＃13;

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

＆＃13;

DIV contentEditable链接格式：如何在输入时键入时阻止追加？

1 个答案: