javascript - 如何检测 url 并将其替换为 contenteditable div 中的链接？

Question

我想在用户每次键入时显示“google.com”，就像我们发布内容时在 facebook textarea 中一样。我是 Web 开发的新手。请帮忙！:) 此代码不起作用。:')

html:

<div data-text="true" id="textbox" contenteditable="true" style="width: 500px; background-color: blanchedalmond; outline: none;z-index:0;" aria-placeholder="true"></div>

javascript:

 $('#textbox').bind("keyup",function(event) {
            if(event.which == 32){
                console.log($(this).text()+'out')
             _text = $(this).text();
             text = _text.split(/\s+/).reverse()[1];
             console.log(text);
            if(text.match('google.com') == 'google.com') {
                console.log(text+'in');
                newText = "<a href='https://www.google.com/'>" + text + "</a>";
                _text = _text.replace(new RegExp(text + '$'), newText)
                $(this).html(_text);
                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();
            }
        }

标签： javascripthtmljquery

Answer 1

$('#tbox').on('input', function() {
  if($('#tbox').val().toLowerCase() == 'google.com'){
   $('#out').text('https://google.com');
  };
});