문자열이 html인지 확인

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

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

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

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

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

문자열이 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 요소가 포함 된 것으로 플래그를 지정합니다.

방법 # 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);
}

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

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

/<(?=.*? .*?\/ ?>|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

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

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

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

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

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

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

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

여기에있는 모든 답변은 지나치게 포괄적이며 <뒤에 >. 문자열이 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'>")

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

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에서 작동하지 않습니다 (그러나 다른 언어에서는 작동합니다).

/<\/?[^>]*>/.test(str) html 태그가 포함되어 있는지 여부 만 감지하고 xml 일 수 있습니다.

jQuery 사용 :

function isHTML(str) {
  return /^<.*?>$/.test(str) && !!$(str)[0];
}

이 경우 jQuery를 사용하면 가장 간단한 형식은 다음과 같습니다.

if ($(testString).length > 0)

만약 $(testString).length = 1, 이것은 내부에 하나의 HTML 태그가 있다는 것을 의미합니다 textStging.

브라우저 자체를 사용하여 텍스트 구문 분석을 시도하고 DOM 노드가 생성되었는지 식별하는 멋진 솔루션이 있습니다. 또는 더 빠르지 만… 잠재적으로 부정확 할 수있는 정규 표현식입니다. 이 문제에서 발생하는 두 가지 매우 뚜렷한 질문도 있습니다.

Q1 : 문자열에 HTML 조각이 포함되어 있습니까?

HTML 요소 마크 업 또는 인코딩 된 엔티티를 포함하는 HTML 문서 의 문자열 부분 입니까? 이것은 문자열에 표백 / 정리 또는 엔티티 디코딩이 필요할 수 있음을 나타내는 지표로 사용할 수 있습니다.

/</?[a-z][^>]*>|(\&(?:[\w\d]+|#\d+|#x[a-f\d]+);/

이 글을 쓰는 당시의 모든 기존 답변의 모든 예제와 일부 ... 다소 끔찍한 WYSIWYG 또는 Word 생성 샘플 텍스트 및 다양한 문자 엔티티 참조에 대해이 패턴이 사용되는 것을 볼 수 있습니다 .

Q2 : 문자열이 HTML 문서입니까?

HTML 사양은 놀랍게도가 HTML 문서를 고려 무엇으로 느슨한됩니다 . 브라우저는 거의 모든 가비지 텍스트를 HTML로 구문 분석하기 위해 극단적 인 길이로 이동합니다. 두 접근 (가 함께 제공되는 경우 이후 두 단지 모두의 HTML을 고려 text/htmlContent-Type을 큰 노력을 소비한다 시도 또는 접두어 마커의 모양 HTML 사용자 에이전트에 의해로 해석) :

<!DOCTYPE html>

"잘 형성됨"의 관점에서, 그 외에 "필수"는 거의 없습니다. 다음은 생략 된 것으로 생각되는 모든 HTML 요소를 포함 하는 100 % 완전하고 완전히 유효한 HTML 문서 입니다.

<!DOCTYPE html>
<title>Yes, really.</title>
<p>This is everything you need.

예. 이 같은 '실종'요소를 형성하는 방법에 대한 명시 적 규칙은 <html>, <head>하고 <body>. SO의 구문 강조 표시가 명시 적 힌트없이 제대로 감지하지 못한 것이 다소 재미 있습니다.

내 해결책은

const element = document.querySelector('.test_element');

const setHtml = elem =>{
    let getElemContent = elem.innerHTML;

    // Clean Up whitespace in the element
    // If you don't want to remove whitespace, then you can skip this line
    let newHtml = getElemContent.replace(/[\n\t ]+/g, " ");

    //RegEX to check HTML
    let checkHtml = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/.test(getElemContent);

    //Check it is html or not
    if (checkHtml){
        console.log('This is an HTML');
        console.log(newHtml.trim());
    }
    else{
        console.log('This is a TEXT');
        console.log(elem.innerText.trim());
    }
}

setHtml(element);

이 문제를 해결할 수있는 NPM 패키지 is-html이 있습니다. https://github.com/sindresorhus/is-html