Sprawdź, czy ciąg to html, czy nie

Mam pewien ciąg, dla którego chcę sprawdzić, czy jest to html, czy nie. Używam wyrażenia regularnego do tego samego, ale nie uzyskuję właściwego wyniku.

Sprawdziłem poprawność mojego wyrażenia regularnego i tutaj działa dobrze .

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

Oto skrzypce, ale wyrażenie regularne tam nie działa. http://jsfiddle.net/wFWtc/

Na moim komputerze kod działa poprawnie, ale w wyniku otrzymuję fałsz zamiast prawda. Czego tu brakuje?

Lepszym wyrażeniem regularnym do sprawdzenia, czy ciąg jest w formacie HTML, jest:

/^/

Na przykład:

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

W rzeczywistości, to jest tak dobra, że będzie to powrót truedo każdej struny przekazany do niego, co jest, bo każdy łańcuch jest HTML . Poważnie, nawet jeśli jest źle sformatowany lub nieprawidłowy, nadal jest to HTML.

Jeśli szukasz elementów HTML, a nie zwykłego tekstu, możesz użyć czegoś takiego jak:

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

Nie pomoże ci to w żaden sposób przeanalizować kodu HTML, ale z pewnością oflaguje ciąg jako zawierający elementy HTML.

Metoda nr 1 . Oto prosta funkcja do sprawdzenia, czy ciąg zawiera dane 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;
}

Pomysł polega na umożliwieniu parserowi DOM przeglądarki decydowania, czy podany ciąg wygląda jak HTML, czy nie. Jak widać, po prostu sprawdza ELEMENT_NODE( nodeTypez 1).

Zrobiłem kilka testów i wygląda na to, że działa:

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

To rozwiązanie poprawnie wykryje ciąg HTML, jednak ma efekt uboczny, że img / vide / etc. Tagi zaczną pobierać zasób po przeanalizowaniu w innerHTML.

Metoda nr 2 . Inna metoda wykorzystuje DOMParser i nie ma skutków ubocznych ładowania zasobów:

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

<sub>Uwagi:
1. Array.fromto metoda ES2015, można ją zastąpić [].slice.call(doc.body.childNodes).
2. Funkcję strzałki w somewywołaniu można zastąpić zwykłą funkcją anonimową.</sub>

Trochę walidacji z:

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

Wyszukuje puste tagi (niektóre predefiniowane) i /zakończone puste tagi XHTML i sprawdza jako HTML z powodu pustego tagu LUB przechwyci nazwę tagu i spróbuje znaleźć zamykający tag gdzieś w ciągu, aby zweryfikować go jako HTML.

Wyjaśnione demo: http://regex101.com/r/cX0eP2

Aktualizacja:

Pełna walidacja z:

/<(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) 

To robi właściwą walidację, ponieważ zawiera ALL znaczniki HTML, puste najpierw, a następnie pozostałe, które wymagają znacznika zamykającego.

Wyjaśnione demo tutaj: http://regex101.com/r/pE1mT5

Powyższa odpowiedź zzzzBov jest dobra, ale nie uwzględnia przypadkowych tagów zamykających, takich jak na przykład:

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

Wersja, która również przechwytuje tagi zamykające, może wyglądać tak:

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

Oto niechlujna jedna linijka, której używam od czasu do czasu:

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

Zasadniczo powróci truedo ciągów zawierających ciąg, <po którym ANYTHINGnastępuje >.

Mówiąc ANYTHING, mam na myśli w zasadzie wszystko oprócz pustego ciągu.

To nie jest świetne, ale to jedna linijka.

Stosowanie

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

Jak widać, jest to dalekie od ideału, ale w niektórych przypadkach może wykonać pracę za Ciebie.

Wszystkie odpowiedzi tutaj są zbyt wyczerpujące, po prostu szukają, <a następnie >. Nie ma idealnego sposobu na wykrycie, czy ciąg to HTML, ale możesz zrobić to lepiej.

Poniżej szukamy tagów końcowych , które będą znacznie ciaśniejsze i dokładniejsze:

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

A oto w akcji:

# 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'>")

Jeśli tworzysz wyrażenie regularne z literału ciągu, musisz uciec przed wszelkimi odwrotnymi ukośnikami:

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

Nie jest to konieczne, jeśli używasz literału wyrażenia regularnego, ale wtedy musisz pominąć ukośniki:

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

Również twój jsfiddle nie działał, ponieważ przypisałeś moduł onloadobsługi w innym onloadmodule obsługi - domyślnym ustawieniem w panelu Frameworks & Extensions po lewej stronie jest owinięcie JS w plik onload. Zmień to na opcję nowrap i popraw ucieczkę literału ciągu i to "działa" (w ramach ograniczeń, które każdy wskazał w komentarzach): http://jsfiddle.net/wFWtc/4/

O ile wiem, wyrażenia regularne JavaScript nie mają odniesień wstecznych. Więc ta część twojego wyrażenia:

</\1>

nie będzie działać w JS (ale będzie działać w niektórych innych językach).

/<\/?[^>]*>/.test(str) Wykrywaj tylko, czy zawiera tagi html, może to być xml

Dzięki jQuery:

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

Używając jQuery w tym przypadku, najprostsza forma to:

if ($(testString).length > 0)

Jeśli $(testString).length = 1oznacza to, że w środku znajduje się jeden tag HTML textStging.

Istnieją wymyślne rozwiązania polegające na wykorzystaniu samej przeglądarki do próby przeanalizowania tekstu i stwierdzenia, czy zostały zbudowane jakiekolwiek węzły DOM, co będzie… powolne. Albo wyrażenia regularne, które będą szybsze, ale… potencjalnie niedokładne. Z tego problemu wynikają również dwa bardzo różne pytania:

P1: Czy ciąg zawiera fragmenty HTML?

Czy ciąg znaków jest częścią dokumentu HTML, zawierającego znaczniki elementu HTML lub zakodowane encje? Może to służyć jako wskaźnik, że ciąg może wymagać wybielania / odkażania lub dekodowania jednostki:

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

Możesz zobaczyć ten wzorzec w użyciu we wszystkich przykładach ze wszystkich istniejących odpowiedzi w czasie tego pisania, a także trochę… raczej ohydny przykładowy tekst wygenerowany w trybie WYSIWYG lub Word i różne odniesienia do jednostek znakowych.

P2: Czy ciąg znaków jest dokumentem HTML?

Specyfikacja HTML jest szokująco luźna, jeśli chodzi o to, co uważa za dokument HTML . Przeglądarki robią wszystko, co w ich mocy, aby przeanalizować prawie każdy śmieciowy tekst jako HTML. Dwa podejścia: albo po prostu weź pod uwagę wszystko HTML (ponieważ jeśli zostanie dostarczony z text/htmltypem treści, włożony zostanie duży wysiłek, aby spróbować zinterpretować go jako HTML przez klienta użytkownika) lub poszukaj znacznika prefiksu:

<!DOCTYPE html>

Jeśli chodzi o „uformowanie”, to i prawie nic więcej nie jest „wymagane”. Poniżej znajduje się w 100% kompletny, w pełni poprawny dokument HTML zawierający każdy element HTML, który Twoim zdaniem jest pomijany:

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

Tak. Istnieją wyraźne zasady, jak tworzyć „brakujących” elementów, takich jak <html>, <head>i <body>. Chociaż wydaje mi się raczej zabawne, że podświetlanie składni SO nie wykryło tego poprawnie bez wyraźnej wskazówki.

Moje rozwiązanie to

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);

Istnieje pakiet NPM is-html, który może próbować rozwiązać ten https://github.com/sindresorhus/is-html