更好的 jQuery 嵌入代码验证（用户通过 textarea 输入）答案

【问题标题】：Better jQuery Embed Code validation (user input via textarea)更好的 jQuery 嵌入代码验证（用户通过 textarea 输入）
【发布时间】：2017-07-22 00:44:09
【问题描述】：

我正在开发一个网站，用户可以在该网站上粘贴来自 twitter、youtube、instagram、facebook 等。嵌入代码经过验证并在有效时保存。

然后用户可以查看和编辑代码，这就是某些代码无法通过验证的地方。例如。 Twitter 嵌入代码可能在帖子名称/文本中包含 &lt;（又名“<，但是当将代码显示给用户时，浏览器会在textarea 中显示&lt;，然后如果用户单击保存则提交。我们的验证函数将此视为tag 的开始，验证失败。

可能的解决方案 1：

更好的验证。我们现在使用的验证看起来像这样它基本上找到标签（通过寻找'

(function($) {
$.validateEmbedCode = function(code) {
    //validating
    var input = code;
    var tags = [];
    $.each(input.split('\n'), function (i, line) {
        $.each(line.match(/<[^>]*[^/]>/g) || [], function (j, tag) {
            var matches = tag.match(/<\/?([a-z0-9]+)/i);
            if (matches) {
                tags.push({tag: tag, name: matches[1], line: i+1, closing: tag[1] == '/'});
            }
        });
    });
    if (tags.length == 0) {
        return true;
    }
    var openTags = [];
    var error = false;
    var indent = 0;
    for (var i = 0; i < tags.length; i++) {
        var tag = tags[i];
        if (tag.closing) {
            // This tag is a closing tag. Decide what to do accordingly.
            var closingTag = tag;
            if (isSelfClosingTag(closingTag.name)) {
                continue;
            }
            if (openTags.length == 0) {
                return false;
            }
            var openTag = openTags[openTags.length - 1];
            if (closingTag.name != openTag.name) {
                return false;
            } else {
                openTags.pop();
            }
        } else {
            var openTag = tag;
            if (isSelfClosingTag(openTag.name)) {
                continue;
            }
            openTags.push(openTag);
        }
    }
    if (openTags.length > 0) {
        var openTag = openTags[openTags.length - 1];
        return false;
    }
    return true
};

}

可能的解决方案 2：

编码包含'textLine.replace(/</g, '<')）的文本，而不编码<blockquote class="...>等标签。

我一直在尝试类似的东西：

$(widget.find("textarea[name='code']").val()).find('*')
.each(function(){
    // validate $(this).text() here. Need to get text only line by
    // line as some elements look like <p>some text <a ...>text
    // </a>more text etc</p>
});

可能的解决方案 3：

在浏览器中将&lt; 显示为&lt; 而不是&lt;/textarea。我们使用 icanhaz 进行模板化（很像小胡子）。

在模板中使用date.code = '&lt;' 和<textarea name="code">{{{code}}}</textarea> 不起作用，{{code}} 也不起作用。

【问题讨论】：

标签： javascript jquery html validation embed

【解决方案1】：

所以我又玩了一些和以下作品，但我仍然对更好的嵌入代码验证或更好答案的建议感兴趣。

在使用 icanhaz 模板创建编辑表单 (inc textarea) 代码之后（即在 widget = ich.editEmbedWidgetTemplate(encoded_data); 之后），我执行以下操作将 &lt; 等实例编码为 &lt; 等。' 必须使用replace手动编码。

var embedCode = '';
$( widget.find("textarea[name='code']").val() )
.filter('*')
.each(function(){
    embedCode += this.outerHTML.replace(/'/g, '&#39;');
});
widget.find("textarea[name='code']").val(embedCode);

【讨论】：