Kiểm tra xem một chuỗi có phải là html hay không

Tôi có một chuỗi nhất định mà tôi muốn kiểm tra xem nó có phải là html hay không. Tôi đang sử dụng regex cho tương tự nhưng không nhận được kết quả thích hợp.

Tôi đã xác thực regex của mình và nó hoạt động tốt ở đây .

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

Đây là fiddle nhưng regex không chạy trong đó. http://jsfiddle.net/wFWtc/

Trên máy của tôi, mã chạy tốt nhưng tôi nhận được kết quả là false thay vì true. Cái gì còn thiếu ở đây?

Một regex tốt hơn để sử dụng để kiểm tra xem một chuỗi có phải là HTML hay không là:

/^/

Ví dụ:

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

Trên thực tế, nó rất tốt, nó sẽ trả về truecho mỗi chuỗi được chuyển đến nó, đó là vì mọi chuỗi đều là HTML . Nghiêm túc mà nói, ngay cả khi nó được định dạng kém hoặc không hợp lệ, nó vẫn là HTML.

Nếu những gì bạn đang tìm kiếm là sự hiện diện của các phần tử HTML, thay vì chỉ đơn giản là bất kỳ nội dung văn bản nào, bạn có thể sử dụng một cái gì đó dọc theo các dòng:

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

Nó sẽ không giúp bạn phân tích cú pháp HTML theo bất kỳ cách nào, nhưng nó chắc chắn sẽ gắn cờ chuỗi chứa các phần tử HTML.

Phương pháp # 1 . Đây là hàm đơn giản để kiểm tra xem chuỗi có chứa dữ liệu HTML hay không:

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

Ý tưởng là cho phép trình phân tích cú pháp DOM của trình duyệt quyết định xem chuỗi được cung cấp có giống HTML hay không. Như bạn có thể thấy, nó chỉ đơn giản là kiểm tra ELEMENT_NODE( nodeTypetrong số 1).

Tôi đã thực hiện một vài thử nghiệm và có vẻ như nó hoạt động:

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

Giải pháp này sẽ phát hiện đúng chuỗi HTML, tuy nhiên nó có tác dụng phụ là img / vide / etc. thẻ sẽ bắt đầu tải xuống tài nguyên sau khi được phân tích cú pháp trong innerHTML.

Phương pháp # 2 . Một phương pháp khác sử dụng DOMParser và không có tác dụng phụ khi tải tài nguyên:

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

<sub>Ghi chú:
1. Array.fromlà phương pháp ES2015, có thể được thay thế bằng [].slice.call(doc.body.childNodes).
2. Hàm mũi tên trong somecuộc gọi có thể được thay thế bằng hàm ẩn danh thông thường.</sub>

Một chút xác thực với:

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

Điều này tìm kiếm các thẻ trống (một số được xác định trước) và / các thẻ trống XHTML đã kết thúc và xác thực dưới dạng HTML vì thẻ trống HOẶC sẽ nắm bắt tên thẻ và cố gắng tìm thẻ đóng ở đâu đó trong chuỗi để xác thực dưới dạng HTML.

Bản demo giải thích: http://regex101.com/r/cX0eP2

Cập nhật:

Hoàn thành xác thực với:

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

Điều này thực hiện xác thực thích hợp vì nó chứa TẤT CẢ các thẻ HTML, những thẻ trống đầu tiên, tiếp theo là những thẻ còn lại cần thẻ đóng.

Bản demo giải thích tại đây: http://regex101.com/r/pE1mT5

Câu trả lời của zzzzBov ở trên là tốt, nhưng nó không giải thích cho các thẻ đóng bị lạc, chẳng hạn như:

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

Một phiên bản cũng bắt các thẻ đóng có thể là:

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

Đây là một lớp lót cẩu thả mà tôi thường sử dụng:

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

Về cơ bản, nó sẽ trả về truecho các chuỗi có chứa một <theo ANYTHINGsau bởi> .

Bởi ANYTHING , tôi có nghĩa là về cơ bản bất cứ điều gì ngoại trừ một chuỗi rỗng.

Nó không tuyệt vời, nhưng nó là một lớp lót.

Sử dụng

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

Như bạn có thể thấy, nó còn lâu mới hoàn hảo, nhưng có thể thực hiện công việc cho bạn trong một số trường hợp.

Tất cả các câu trả lời ở đây là bao hàm quá mức, họ chỉ cần tìm <theo sau >. Không có cách hoàn hảo nào để phát hiện một chuỗi có phải là HTML hay không, nhưng bạn có thể làm tốt hơn.

Dưới đây, chúng tôi tìm kiếm các thẻ kết thúc và sẽ chặt chẽ hơn và chính xác hơn:

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

Và nó đang hoạt động ở đây:

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

Nếu bạn đang tạo regex từ một chuỗi ký tự, bạn cần phải loại bỏ bất kỳ dấu gạch chéo ngược nào:

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

Điều này là không cần thiết nếu bạn sử dụng ký tự regex, nhưng sau đó bạn cần thoát khỏi các dấu gạch chéo về phía trước:

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

Ngoài ra, jsfiddle của bạn không hoạt động vì bạn đã chỉ định một onloadtrình xử lý bên trong một onloadtrình xử lý khác - mặc định như được đặt trong bảng Khung công tác & Tiện ích mở rộng ở bên trái là bọc JS trong một onload. Thay đổi tùy chọn đó thành tùy chọn nowrap và sửa chuỗi thoát theo nghĩa đen và nó "hoạt động" (trong các ràng buộc mà mọi người đã chỉ ra trong nhận xét): http://jsfiddle.net/wFWtc/4/

Theo như tôi biết thì biểu thức chính quy JavaScript không có tham chiếu ngược. Vì vậy, phần này của biểu thức của bạn:

</\1>

sẽ không hoạt động trong JS (nhưng sẽ hoạt động trong một số ngôn ngữ khác).

/<\/?[^>]*>/.test(str) Chỉ phát hiện xem nó có chứa các thẻ html hay không, có thể là một xml

Với jQuery:

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

Sử dụng jQuery trong trường hợp này, dạng đơn giản nhất sẽ là:

if ($(testString).length > 0)

Nếu $(testString).length = 1, điều này có nghĩa là có một thẻ HTML bên trong textStging.

Có những giải pháp ưa thích liên quan đến việc sử dụng chính trình duyệt để cố gắng phân tích cú pháp văn bản, xác định xem có bất kỳ nút DOM nào được xây dựng hay không, điều này sẽ… chậm. Hoặc biểu thức chính quy sẽ nhanh hơn, nhưng… có khả năng không chính xác. Cũng có hai câu hỏi rất khác biệt nảy sinh từ vấn đề này:

Q1: Một chuỗi có chứa các đoạn HTML không?

Chuỗi có phải là một phần của tài liệu HTML, chứa đánh dấu phần tử HTML hoặc các thực thể được mã hóa không? Điều này có thể được sử dụng như một chỉ báo rằng chuỗi có thể yêu cầu tẩy trắng / làm vệ sinh hoặc giải mã thực thể:

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

Bạn có thể thấy mẫu này được sử dụng đối với tất cả các ví dụ từ tất cả các câu trả lời hiện có tại thời điểm viết bài này, cộng với một số… văn bản mẫu khá ghê tởm do WYSIWYG- hoặc Word tạo và nhiều tham chiếu thực thể ký tự.

Câu hỏi 2: Chuỗi có phải là tài liệu HTML không?

Đặc tả HTML lỏng lẻo một cách đáng kinh ngạc so với những gì nó coi là một tài liệu HTML . Các trình duyệt có độ dài cực cao để phân tích gần như bất kỳ văn bản rác nào dưới dạng HTML. Hai cách tiếp cận: hoặc chỉ xem xét mọi thứ HTML (vì nếu được phân phối với text/htmlLoại-Nội dung, thì tác nhân người dùng sẽ phải nỗ lực rất nhiều để cố gắng diễn giải nó thành HTML) hoặc tìm kiếm điểm đánh dấu tiền tố:

<!DOCTYPE html>

Về mặt "hình thành tốt", điều đó, và hầu như không có gì khác là "bắt buộc". Sau đây là tài liệu HTML hoàn chỉnh, hoàn toàn hợp lệ 100% chứa mọi phần tử HTML mà bạn cho rằng đang bị bỏ qua:

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

Đúng vậy. Có những quy tắc rõ ràng về cách tạo "mất tích" các yếu tố như <html>, <head>, và <body>. Mặc dù tôi thấy khá thú vị khi đánh dấu cú pháp của SO không phát hiện được đúng cách mà không có gợi ý rõ ràng.

Giải pháp của tôi là

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

Có một gói NPM là-html có thể cố gắng giải quyết vấn đề này https://github.com/sindresorhus/is-html