[javascript] 문자열이 html인지 확인

Question 1

html인지 아닌지 확인하려는 특정 문자열이 있습니다. 정규식을 동일하게 사용하고 있지만 적절한 결과를 얻지 못했습니다.

내 정규식을 확인했고 여기에서 잘 작동합니다 .

var htmlRegex = new RegExp("<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)</\1>");
return htmlRegex.test(testString);

여기에 바이올린이 있지만 정규식이 거기에서 실행되지 않습니다. http://jsfiddle.net/wFWtc/

내 컴퓨터에서는 코드가 정상적으로 실행되지만 결과로 true 대신 false가 표시됩니다. 여기에 무엇이 빠졌습니까?

Question 2

문자열이 HTML인지 확인하는 데 사용하는 더 나은 정규식은 다음과 같습니다.

/^/

예를 들면 :

/^/.test('') // true
/^/.test('foo bar baz') //true
/^/.test('<p>fizz buzz</p>') //true

사실, 그것은 모든 문자열이 HTML 이기 때문에 전달 된 모든 문자열에 true대해 반환 될 정도로 훌륭 합니다. 진지하게, 형식이 잘못되었거나 유효하지 않더라도 여전히 HTML입니다.

원하는 것이 단순히 텍스트 콘텐츠가 아닌 HTML 요소의 존재라면 다음과 같은 내용을 사용할 수 있습니다.

/<\/?[a-z][\s\S]*>/i.test()

어떤 식 으로든 HTML을 구문 분석하는 데 도움이되지는 않지만 확실히 문자열에 HTML 요소가 포함 된 것으로 플래그를 지정합니다.

Question 3

방법 # 1 . 다음은 문자열에 HTML 데이터가 포함되어 있는지 테스트하는 간단한 함수입니다.

function isHTML(str) {
  var a = document.createElement('div');
  a.innerHTML = str;

  for (var c = a.childNodes, i = c.length; i--; ) {
    if (c[i].nodeType == 1) return true;
  }

  return false;
}

아이디어는 브라우저 DOM 파서가 제공된 문자열이 HTML처럼 보이는지 여부를 결정할 수 있도록하는 것입니다. 보시다시피 단순히 ELEMENT_NODE( nodeTypeof 1)을 확인합니다 .

몇 가지 테스트를했고 작동하는 것처럼 보입니다.

isHTML('<a>this is a string</a>') // true
isHTML('this is a string')        // false
isHTML('this is a <b>string</b>') // true

이 솔루션은 HTML 문자열을 올바르게 감지하지만 img / vide / etc와 같은 부작용이 있습니다. innerHTML에서 파싱되면 태그가 리소스 다운로드를 시작합니다.

방법 # 2 . 또 다른 방법은 DOMParser를 사용하며 로드 리소스 부작용이 없습니다.

function isHTML(str) {
  var doc = new DOMParser().parseFromString(str, "text/html");
  return Array.from(doc.body.childNodes).some(node => node.nodeType === 1);
}

_{참고 :
1. Array.fromES2015 방법이며 [].slice.call(doc.body.childNodes).
2. some호출중인 화살표 기능 을 일반적인 익명 기능으로 대체 할 수 있습니다.}

Question 4

다음을 통한 약간의 유효성 검사 :

/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i.test(htmlStringHere)

이것은 빈 태그 (일부 사전 정의 됨) 및 /종료 된 XHTML 빈 태그를 검색하고 빈 태그 로 인해 HTML로 유효성을 검사합니다. 또는 태그 이름을 캡처하고 HTML로 유효성을 검사하기 위해 문자열에서 닫는 태그를 찾으려고 시도합니다.

데모 설명 : http://regex101.com/r/cX0eP2

최신 정보:

다음을 통한 완전한 검증 :

/<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\/\2>/i.test(htmlStringHere)

이것은 모든 HTML 태그를 포함하기 때문에 적절한 유효성 검사를 수행합니다. 먼저 빈 태그와 닫는 태그가 필요한 나머지 태그가 뒤 따릅니다.

데모 설명 : http://regex101.com/r/pE1mT5

Question 5

위의 zzzzBov의 대답 은 좋지만 예를 들어 다음과 같이 길잃은 닫는 태그를 고려하지 않습니다.

/<[a-z][\s\S]*>/i.test('foo </b> bar'); // false

닫는 태그도 포착하는 버전은 다음과 같습니다.

/<[a-z/][\s\S]*>/i.test('foo </b> bar'); // true

Question 6

내가 때때로 사용하는 엉성한 한 줄짜리가 있습니다.

var isHTML = RegExp.prototype.test.bind(/(<([^>]+)>)/i);

그것은 기본적으로 반환합니다 true포함하는 문자열에 대한 <다음 ANYTHING다음을 >.

으로는 ANYTHING, 나는 빈 문자열을 제외하고 기본적으로 아무 의미.

좋지는 않지만 한 줄짜리입니다.

용법

isHTML('Testing');               // false
isHTML('<p>Testing</p>');        // true
isHTML('<img src="hello.jpg">'); // true
isHTML('My < weird > string');   // true (caution!!!)
isHTML('<>');                    // false

보시다시피 완벽하지는 않지만 어떤 경우에는 당신을 위해 일할 수도 있습니다.

Question 7

여기에있는 모든 답변은 지나치게 포괄적이며 <뒤에 >. 문자열이 HTML인지 감지하는 완벽한 방법은 없지만 더 잘할 수 있습니다.

아래에서 종료 태그를 살펴보면 훨씬 더 엄격하고 정확 해집니다.

import re
re_is_html = re.compile(r"(?:</[^<]+>)|(?:<[^<]+/>)")

그리고 여기에 실제로 있습니다.

# Correctly identified as not HTML:
print re_is_html.search("Hello, World")
print re_is_html.search("This is less than <, this is greater than >.")
print re_is_html.search(" a < 3 && b > 3")
print re_is_html.search("<<Important Text>>")
print re_is_html.search("<a>")

# Correctly identified as HTML
print re_is_html.search("<a>Foo</a>")
print re_is_html.search("<input type='submit' value='Ok' />")
print re_is_html.search("<br/>")

# We don't handle, but could with more tweaking:
print re_is_html.search("<br>")
print re_is_html.search("Foo &amp; bar")
print re_is_html.search("<input type='submit' value='Ok'>")

Question 8

문자열 리터럴에서 정규식을 만드는 경우 백 슬래시를 이스케이프해야합니다.

var htmlRegex = new RegExp("<([A-Za-z][A-Za-z0-9]*)\\b[^>]*>(.*?)</\\1>");
// extra backslash added here ---------------------^ and here -----^

정규식 리터럴을 사용하는 경우에는 필요하지 않지만 슬래시를 이스케이프해야합니다.

var htmlRegex = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/;
// forward slash escaped here ------------------------^

또한 onload다른 핸들러 내부 에 핸들러 를 할당했기 때문에 jsfiddle이 작동하지 않았습니다 onload. 왼쪽의 Frameworks & Extensions 패널에 설정된 기본값은 JS를 onload. 그것을 nowrap 옵션으로 변경하고 문자열 리터럴 이스케이프를 수정하면 “작동”합니다 (모든 사람이 주석에서 지적한 제약 내에서). http://jsfiddle.net/wFWtc/4/

~~내가 아는 한 JavaScript 정규식에는 역 참조가 없습니다. 이 부분은 다음과 같습니다.~~

~~</\1>~~

~~JS에서 작동하지 않습니다 (그러나 다른 언어에서는 작동합니다).~~