在输入字段中仅允许 HTTPS URL

Question

我正在使用 Trumbowyg，一个所见即所得 JavaScript 编辑器，它允许通过粘贴 URL.

来渲染图像

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

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

这是图像的函数 URL (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 中是否存在 'https'，例如 url.match(/^https/)，或者您可以使用 url.startsWith ('https') 查找 url 是否以 https 开头。

Answer 2

我会使用正则表达式来检查这个

var url = v.url;

然后使用匹配功能

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

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

Answer 3

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

正则表达式允许您验证字符串是否确实包含您期望的数据。正则表达式的缺点是 CPU 密集。这就是为什么只有在没有其他函数可用于完成这项工作时才应使用 regex 的原因。碰巧，还有另一个函数可用于此：substr().

因此更好的解决方案是：

var url = v.url;

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

虽然学习正则表达式在长运行中绝对有帮助。 https://regex101.com/ 是一个对您有很大帮助的网站。您最终会运行陷入其他解决方案根本不可用的情况。因此，使用正则表达式进行测试是一种很好的学习方式。使用正则表达式，解决方案是：

var url = v.url;

if(!url.match(/^https:\/\//)){
    return false;
}

在输入字段中仅允许 HTTPS URL

Allow only HTTPS URL in input field

javascript

ajax

jquery

trumbowyg