我如何替换像twitter或facebook这样的keydown事件上的hash标签.javascript//jquer

Question

我有contentEditable元素（可能是div…），我想在keydown事件中替换hash标记或url，比如twitter（或facebook）。

我通常可以在下面用这个存档。。

    //onKeydown Event
    ....
    _this.saveRange();   // save current range
    var string = _this.getHtml();    //_this is contentEditable element (div)
    var reg = /(:?#{1}|s#{1})([A-Za-z0-9.;_-ㄱ-ㅎ|ㅏ-ㅣ|가-힣]+)/gm;
    if(reg.test(string)) {
        var text = string.replace(reg, function(u) {
            return '<a class="highlight" rel="external" id="test">' + u + '</a>';
        });
        _this.setHtml(text);    // insert html what replaced using innerHtml 
        _this.restoreRange();
    }

这可以很好地替换文本。。on keydown事件。

但当我设置替换的html时，文档范围（光标）是移动第一个位置。

这是个问题。

我在innerHtml之前保存了范围，在innerHtml之后恢复了范围。但它不起作用。

下面我使用了函数saveRange和restoreRange。

    var savedRange;   //public variable
    function saveRange() {
        if(window.getSelection) {
            savedRange = window.getSelection().getRangeAt(0);
        } else if(document.selection) {  //IE
            savedRange = document.selection.createRange();
        }
    }    

     function restoreRange() {
            if (savedRange != null) {
                    if (window.getSelection)//non IE and there is already a selection
                    {
                        var s = window.getSelection();
                        if (s.rangeCount > 0) 
                            s.removeAllRanges();
                        s.addRange(savedRange);
                    }
                    else if (document.createRange)//non IE and no selection
                    {
                        window.getSelection().addRange(savedRange);
                    }
                    else if (document.selection)//IE
                    {
                        savedRange.select();
                    }
                }
         }

有人能想出解决办法吗？？？或者给我一个链接。。。。。

Answer 1

只要文本内容保持不变，就可以通过字符索引保存和恢复选择范围。我在这里提供了一些简单的功能：

https://stackoverflow.com/a/17694760/96100