javascript - 文字列がhtmlかどうかをチェック

Question

HTMLかどうかを確認したい特定の文字列があります。同じために正規表現を使用していますが、適切な結果が得られません。

正規表現を検証しましたが、ここでは正常に動作します。

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

ここにフィドルがありますが、正規表現はそこで実行されていません。http://jsfiddle.net/wFWtc/

私のマシンでは、コードは正常に実行されますが、結果として true ではなく false が返されます。ここに何が欠けていますか？

score 383 · Accepted Answer

文字列が 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 要素が含まれていることを示すフラグは確実に立てられます。

score 96 · Accepted Answer

方法 #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.fromは ES2015 メソッドであり、に置き換えることができます[].slice.call(doc.body.childNodes)。
2. 呼び出し中のアロー関数はsome、通常の無名関数に置き換えることができます。}

score 14 · Accepted Answer

以下を使用して少し検証します。

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

score 13 · Accepted Answer

上記の zzzzBov の回答は適切ですが、たとえば次のような閉じタグが適切に表示されていません。

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

終了タグもキャッチするバージョンは次のようになります。

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

score 12 · Accepted Answer

これは、私が時々使用するずさんなワンライナーです。

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

基本的に、 a の後にが続く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

ご覧のとおり、これは完璧にはほど遠いですが、場合によってはうまくいくかもしれません。

score 4 · Accepted Answer

文字列リテラルから正規表現を作成している場合は、バックスラッシュをエスケープする必要があります。

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左側の [フレームワークと拡張機能] パネルで設定されているデフォルトは、JS をonload. それを nowrap オプションに変更し、文字列リテラルのエスケープを修正すると、「機能します」(誰もがコメントで指摘した制約内で): http://jsfiddle.net/wFWtc/4/

~~私の知る限り、JavaScript の正規表現には後方参照がありません。だからあなたの表現のこの部分：~~

~~</\1>~~

~~JS では機能しません (ただし、他の言語では機能します)。~~

score 3 · Accepted Answer

/<\/?[^>]*>/.test(str)html タグが含まれているかどうかのみを検出します。xml の場合もあります

score 3 · Accepted Answer

3

jQuery の場合:

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

于 2013-11-19T14:07:40.093 に答える

score 2 · Accepted Answer

これは古いスレッドですが、自分のニーズに合わせて書いたソリューションを共有したかっただけです。

function isHtml(input) {
    return /<[a-z]+\d?(\s+[\w-]+=("[^"]*"|'[^']*'))*\s*\/?>|&#?\w+;/i.test(input);
}

このスレッドで見つけたトリッキーなケースのほとんどをカバーする必要があります。このページでdocument.body.innerTextとを使用してテストしましたdocument.body.innerHTML。

誰かの役に立てば幸いです。:)

javascript - 文字列がhtmlかどうかをチェック

17 に答える 17

Related

Reference