더 나은 jQuery를 삽입 코드 검증 (텍스트 영역을 통해 사용자 입력)

Question

나는 사용자가 트위터 등 유튜브, 인스 타 그램, 페이스 북의 좋아하는에서 임베드 코드에 붙여 넣을 수 있습니다 사이트에서 일하고 있어요 유효한 경우 Embed 코드의 유효성을 검사하고 저장합니다.

사용자는 코드를보고 편집 할 수 있으며 일부 코드는 유효성 검사에 실패합니다. 예 : Twitter 임베드 코드에는 게시물 이름/텍스트에 < (일명 '<')이 포함될 수 있습니다. 코드에 붙여 넣을 때 <이 포함 된 유효성 검사를 통과하지만 코드를 다시 사용자에게 표시하면 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 :

표시 < 브라우저/textarea에서 <&lt;뿐만 아니라

나는 같은 실험을했습니다. 우리는 templating (콧수염처럼)을 위해 icanhaz를 사용합니다.

템플릿에 <textarea name="code">{{{code}}}</textarea>과 함께 date.code = '<'을 사용하면 작동하지 않으며 어느 쪽도 수행하지 않습니다. {{code}}.

Answer 1

그래서 저는 더 많은 작업을 했었지만 더 나은 임베드 코드 유효성 검사 또는 더 나은 답변을위한 제안에 관심이 있습니다. 편집 형태 후

은 (INC textarea) 코드가 icanhaz 템플릿을 사용하여 생성된다 (즉, 후 widget = ich.editEmbedWidgetTemplate(encoded_data);) i를 < 등 '가 replace를 사용하여 수동으로 부호화되어야로 < 등의 인스턴스를 인코딩하기 위해 다음과 같이.

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