Question

我正在创建一个简单的文本编辑器，它具有在您点击空格键后将链接（作为文本）转换为超链接的功能。

我几乎成功了。除了这种情况：把文字链接放在 - ＆gt;转换为超链接 - ＆gt;在超链接后移动光标 - ＆gt;输入一些文字 - ＆gt;放一个空格 - ＆gt;把文字链接放在

中

在最后一步中，转换为超链接失败。我最近几天一直在关注这个问题，但我无法弄清楚哪里出了问题。我的正则表达式看起来很好，所以我不认为检测是有问题的...也许是我在第52行this.monitorInput替换满意的内容的方式？

如果某人至少可以告诉我应该在哪里寻找这个问题，我会非常有帮助。

您可以在this pen中测试该程序，但您可以在此处查看代码：

HTML：

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <div id="input" contenteditable>


  </div>

  <div id="hidden" value="">
  </div>

</body>
</html>

的Javascript

function UrlConverter(input, hiddenInput) {
    // listen on this input
    this.input = input;
    // this is where the actual updated form data will go
    this.hiddenInput = hiddenInput;
    this.rePattern = /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.([^\W\s]{2,}))/;
    this.linkReplacementPattern = /<a.*?<\/a>/;
    this.keyCode = null
    this.linkText = 'LINK';
    this.urlRegex = null;
    this.initialize = function () {
      console.log('initialized');
        this.urlRegex = new RegExp(this.rePattern);
        // prevent newline characters
        $(this.input).keypress(function(e){ return e.which != 13; });
        // do the magic
        $(this.input).on('keydown input', this.monitorInput);
        //$(this.input).on('keydown keyup', this.monitorKeyInputs);
     };
    // will re-render prepared string in hidden field
    this.updateOutputStr = function (inputContent) {
        var newContent = $.parseHTML(inputContent);
        newContent.forEach(function (val, index, array) {
            if (val.constructor === HTMLAnchorElement) {
                var convertedLink = '{{' + $(val).attr('href') + '}}'
                array[index] = convertedLink;
            } else {
                array[index] = val.data.replace(/&nbsp;/, ' ');
            }
        });
        $(this.hiddenInput).val(newContent.join(''));
        this.checkCount();
    };
    this.checkCount = function() {
        var rawContents = $(this.hiddenInput).val();
        if (rawContents.length > 0) {
            rawContents = rawContents.replace(/\{{2}.+\}{2}/, this.linkText);
        }
        var count = rawContents.length;
    }.bind(this);
    this.monitorInput = function (e) {
        var self = this;
        var inputContent = $(e.target).html();
        this.keyCode = $(e.which);
      console.log(this.keyCode);
        if (inputContent.length > 0) {
            $.parseHTML(inputContent).forEach(function (val) {
                if (val.constructor === Text) {
                    if (self.urlRegex.test(val.data) && this.keyCode[0] === 32) {
                        var match = val.data.match(self.urlRegex);
                        var newContent = inputContent.replace(match[1], self.createLink(match));
                        $(self.input).html(newContent);
                    }
                }
                self.updateOutputStr(inputContent);
            }, this);
        }
    }.bind(this);
    this.createLink = function (match) {
        return '<a href="' + match[1] + '" title="' + match[1] + '" contenteditable="false">' + this.linkText + '</a>';
    };
}

var converter = new UrlConverter('div#input', 'div#hidden')
converter.initialize();

具有自动URL转换功能的可信DIV中的简单编辑器

0 个答案: