Question

我正在使用Trumbowyg，这是一种所见即所得的JavaScript编辑器，它允许通过粘贴URL渲染图像。

因此，您将URL粘贴在字段中，然后单击Confirm按钮，然后它将图像添加到编辑器中（you can test it out here）

我想防止添加非HTTPS的图像。因此，如果有人插入不是HTTPS的URL，我想防止在他们单击Confirm时附加图像。

这是图片网址（from the docs）的功能：

insertImage: function () {
            var t = this;
            t.saveRange();

            var options = {
                url: {
                    label: 'URL',
                    required: true
                },
                alt: {
                    label: t.lang.description,
                    value: t.getRangeText()
                }
            };

            if (t.o.imageWidthModalEdit) {
                options.width = {};
            }

            t.openModalInsert(t.lang.insertImage, options, function (v) { // v are values
                t.execCmd('insertImage', v.url);
                var $img = $('img[src="' + v.url + '"]:not([alt])', t.$box);
                $img.attr('alt', v.alt);

                if (t.o.imageWidthModalEdit) {
                    $img.attr({
                        width: v.width
                    });
                }

                t.syncCode();
                t.$c.trigger('tbwchange');

                return true;
            });
        }

有什么主意我可以修改此功能以仅允许HTTPS输入吗？

Answer 1

您可以使用正则表达式来检查url.match（/ ^ https /）之类的url中是否存在“ https”，也可以使用url.startsWith（'https'）来查找url是否以还是不https。

Answer 2

我将使用正则表达式对此进行检查

var url = v.url;

然后使用匹配功能

url.match(/^https:\/\//);

请注意不要使用startsWith('https')进行检查，因为并非所有浏览器都支持startsWith()

Answer 3

此问题的一个好的解决方案是使用Regular Expressions，或简称：Regex。

正则表达式使您可以验证字符串是否真正包含所需的数据。 regex的缺点是它占用大量CPU。这就是仅在没有其他功能可完成此工作时才使用正则表达式的原因。碰巧的是，还有另一个可用的功能：substr()。

因此，更好的解决方案是：

this

尽管从长远来看，学习正则表达式绝对有帮助。 https://regex101.com/是一个可以为您提供很多帮助的网站。您最终将遇到无法使用其他解决方案的情况。因此，使用正则表达式进行测试是学习的好方法。使用正则表达式，解决方案将是：

var url = v.url;

if(!url.substr(0,7) === 'https://'){
    return false;
}

在输入字段中仅允许HTTPS URL

3 个答案: