文字列が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

実際、これは非常に優れており、渡さtrueれたすべての文字列に対して返されます。これは、すべての文字列がHTMLであるためです。深刻なことに、フォーマットが正しくない場合や無効な場合でも、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などの副作用があります。タグは、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.fromはES2015メソッドで、と置き換えることができます[].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) 

ALLが含まれているため、これは適切な検証を行います 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たonload。左側の[フレームワークと拡張機能]パネルで設定されているデフォルトでは、JSをでラップしています。これを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タグが1つあることを意味しますtextStging。

ブラウザ自体を使用してテキストを解析し、DOMノードが構築されているかどうかを特定するという、凝った解決策があります。または、正規表現は高速になりますが、…不正確になる可能性があります。この問題から生じる2つの非常に異なる質問もあります。

Q1：文字列にはHTMLフラグメントが含まれていますか？

文字列は、HTML要素のマークアップまたはエンコードされたエンティティを含むHTMLドキュメントの一部ですか？これは、文字列がブリーチ/サニタイズまたはエンティティのデコードを必要とする可能性があることを示すインジケータとして使用できます。

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

このパターンが使用されているのがわかります、この記事の執筆時点では、既存のすべての回答からのすべての例に加え、いくつか...むしろ恐ろしいWYSIWYG-またはWordで生成されたサンプルテキストと文字実体参照の多様性に対する。

Q2：文字列はHTMLドキュメントですか？

HTMLの仕様では、衝撃的な、それがHTMLドキュメントを考えるものへと緩んでいます。ブラウザーは極端な長さで、ほとんどすべての不要なテキストをHTMLとして解析します。2つのアプローチ：すべての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