Question

我正在一个用户可以粘贴来自 twitter ， youtube ， instagram 等嵌入代码的网站上工作， facebook 等。如果有效，则验证并保存嵌入代码。

然后，用户可以查看和编辑代码，这是某些代码验证失败的地方。例如。 Twitter嵌入代码可能在帖子名称/文本中包含<（又名＆＃39;＆lt;＆＃39;）。在最初粘贴代码时，它会通过验证，因为它包含<，但在向用户显示代码时，浏览器会在<中显示textarea，然后在用户提交点击保存。我们的验证功能将此视为tag的开头，验证失败。

可能的解决方案1：

更好的验证。我们现在使用的验证看起来像这样它基本上找到了标签（通过查找＆＃39;＆lt;＆＃39;等）并检查每个开放标签是否有结束标签。必须有更好/标准/常用的方式：

(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：

对包含＆＃39;＆lt;＆＃39; （即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：

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

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

Answer 1

所以我播放了更多以及下面的内容，但我仍然对更好的嵌入代码验证或更好的答案的建议感兴趣。

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

replace

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

1 个答案: