2017-03-02 3 views
0

私は、ユーザーがさえずりなどユーチューブInstagramのFacebookの、の同類からの埋め込みコードに貼り付けることができ、サイトに取り組んでいます有効な場合、埋め込みコードは検証され、保存されます。より良いjQueryの埋め込みコードの検証(テキストエリアを介したユーザ入力)

ユーザーはコードを確認して編集することができ、これは一部のコードが検証に失敗する場所です。例えば。 Twitter埋め込みコードには、投稿名/テキストに&lt;(別名「<」)が含まれている可能性があります。コードに貼り付けるときは、最初に&lt;を含む検証が渡されますが、ユーザーにコードを表示すると、textareaにブラウザの<が表示され、ユーザーが[保存]をクリックすると送信されます。私たちの検証関数はこれを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, '&lt;')<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;ブラウザ/ textarea<&lt;としてではなく

私のようなものを試してきました。私たちはテンプレート作成のためにicanhazを使用します(口ひげのように)。

テンプレート内にdate.code = '&lt;'<textarea name="code">{{{code}}}</textarea>を使用しても動作しません。どちらも{{code}}です。

答えて

0

私はもう少し以下の作品を演奏しましたが、より良い埋め込みコードの検証やより良い答えの提案にはまだ興味があります。

編集フォーム(INC textarea)コード(すなわちwidget = ich.editEmbedWidgetTemplate(encoded_data);後)icanhazテンプレートを使用して作成された後、私は&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); 
関連する問題