Hướng dẫn how do you check if a string is html or not using javascript? - làm cách nào để kiểm tra xem một chuỗi có phải là html hay không bằng javascript?

Question

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

Nội dung chính Show

Q1: Một chuỗi có chứa các đoạn HTML không?
Câu 2: Chuỗi có phải là tài liệu HTML không?

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

var htmlRegex = new RegExp("<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)");
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 hiểu sai thay vì đúng như kết quả. Thiếu gì ở đây?

hỏi ngày 17 tháng 3 năm 2013 lúc 8:23Mar 17, 2013 at 8:23

user1240679user1240679user1240679

6.59917 Huy hiệu vàng58 Huy hiệu bạc85 Huy hiệu Đồng17 gold badges58 silver badges85 bronze badges

9

Một regex tốt hơn để sử dụng để kiểm tra xem một chuỗi là html là:

/^/

Ví dụ:

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

Trên thực tế, nó rất tốt, nó sẽ trả lại

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

0 cho mỗi chuỗi được truyền cho nó, đó là do mỗi chuỗi 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.every string is HTML. Seriously, even if it's poorly formatted or invalid, it's still 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 của:

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

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

Hướng dẫn how do you check if a string is html or not using javascript? - làm cách nào để kiểm tra xem một chuỗi có phải là html hay không bằng javascript?

Derpynerd

4.5486 Huy hiệu vàng37 Huy hiệu bạc88 Huy hiệu Đồng6 gold badges37 silver badges88 bronze badges

Đã trả lời ngày 17 tháng 3 năm 2013 lúc 8:43Mar 17, 2013 at 8:43

19

Phương pháp số 1. Dưới đây là chức năng đơn giản để kiểm tra nếu chuỗi chứa dữ liệu HTML:. Here is the simple function to test if the string contains HTML data:

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ó trông giống như HTML hay không. Như bạn có thể thấy nó chỉ cần kiểm tra

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

1 (

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

2 của 1).

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

isHTML('this is a string') // true
isHTML('this is a string')        // false
isHTML('this is a string') // 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ụ mà img/vide/vv. Tags sẽ bắt đầu tải xuống tài nguyên sau khi được phân tích cú pháp trong bên trong.

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ụ tài nguyên tải:. Another method uses DOMParser and doesn't have loading resources side effects:

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

Ghi chú: 1.

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

3 là phương pháp ES2015, có thể được thay thế bằng ________ 34.2. Hàm mũi tên trong cuộc gọi

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

5 có thể được thay thế bằng hàm ẩn danh thông thường.
1.

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

3 is ES2015 method, can be replaced with

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

4.
2. Arrow function in

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

5 call can be replaced with usual anonymous function.

Đã trả lời ngày 17 tháng 3 năm 2013 lúc 8:40Mar 17, 2013 at 8:40

DFSQDFSQdfsq

Phù bằng vàng 190K2525 gold badges232 silver badges253 bronze badges

10

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

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

Về cơ bản, nó sẽ trả về

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

0 cho các chuỗi chứa

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

7 sau đó là

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

8 sau đó là

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

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

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

9.

Đến

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

8, về cơ bản, tôi có nghĩa là bất cứ điều gì ngoại trừ một chuỗi trống.
/<\/?[a-z][\s\S]*>/i.test()
8, I mean basically anything except an empty string.

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

Cách sử dụng

isHTML('Testing');               // false
isHTML('Testing');        // true
isHTML(''); // true
isHTML('My < weird > string');   // true (caution!!!)
isHTML('<>');                    // false

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

Đã trả lời ngày 21 tháng 4 năm 2016 lúc 14:50Apr 21, 2016 at 14:50

Johan Dettmarjohan DettmarJohan Dettmar

26.7K4 Huy hiệu vàng32 Huy hiệu bạc28 Huy hiệu đồng4 gold badges32 silver badges28 bronze badges

1

Một chút xác nhận 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ố thẻ trống được xác định trước) và

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

1 đã chấm dứt các thẻ trống XHTML và xác thực là HTML vì thẻ trống hoặc sẽ ghi tên thẻ và cố gắng tìm thẻ đóng ở đâu đó trong chuỗi để xác thực là HTML.

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

Update:

Xác nhận hoàn chỉnh với:

/^/

0

Đ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, các thẻ trống trước tiên theo sau là phần còn lại cần thẻ đóng.proper validation as it contains ALL HTML tags, empty ones first followed by the rest which need a closing tag.

Giải thích bản demo tại đây: http://regex101.com/r/PE1MT5

Đã trả lời ngày 17 tháng 3 năm 2013 lúc 9:29Mar 17, 2013 at 9:29

CSᵠcsᵠCSᵠ

10K9 Huy hiệu vàng39 Huy hiệu bạc64 Huy hiệu đồng9 gold badges39 silver badges64 bronze badges

3

Câu trả lời của Zzzzbov ở trên là tốt, nhưng nó không tính đến các thẻ đóng đi lạc, ví dụ như:

/^/

1

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

/^/

2

Đã trả lời ngày 19 tháng 8 năm 2014 lúc 10:24Aug 19, 2014 at 10:24

AeonoftimeaeonoftimeAeonOfTime

9467 Huy hiệu bạc10 Huy hiệu đồng7 silver badges10 bronze badges

2

Tất cả các câu trả lời ở đây là bao gồm quá mức, họ chỉ tìm kiếm

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

7 theo sau là

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

9. Không có cách nào hoàn hảo để phát hiện nếu một chuỗi là HTML, 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ẻ cuối, và sẽ chặt chẽ hơn và chính xác hơn nhiều:end tags, and will be much tighter and more accurate:

/^/

3

Và đây là hành động:

/^/

4

Đã trả lời ngày 13 tháng 7 năm 2018 lúc 13:12Jul 13, 2018 at 13:12

SpeedPlanespedPlanespeedplane

15.3K16 Huy hiệu vàng84 Huy hiệu bạc136 Huy hiệu đồng16 gold badges84 silver badges136 bronze badges

Nếu bạn đang tạo ra một regex từ một chuỗi theo nghĩa đen, bạn cần thoát khỏi bất kỳ dấu gạch chéo ngược nào:

/^/

5

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

/^/

6

Ngoài ra, JSFiddle của bạn đã không hoạt động vì bạn đã chỉ định một trình xử lý

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

4 bên trong một trình xử lý

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

4 khác - mặc định như được đặt trong bảng điều khiển Frameworks & Tiện ích mở rộng ở bên trái là để bọc JS trong một

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

4. Thay đổi điều đó 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 các bình luận): http://jsfiddle.net/wfwtc/4/

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

/^/

7

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

Đã trả lời ngày 17 tháng 3 năm 2013 lúc 8:31Mar 17, 2013 at 8:31

nnnnnnnnnnnnnnnnnn

Badges vàng 145K2929 gold badges194 silver badges237 bronze badges

3

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

7 Chỉ phát hiện xem nó có chứa thẻ HTML hay không, có thể là XML

Đã trả lời ngày 5 tháng 2 năm 2016 lúc 4:09Feb 5, 2016 at 4:09

1

Với jQuery:

/^/

8

Đã trả lời ngày 19 tháng 11 năm 2013 lúc 14:07Nov 19, 2013 at 14:07

gtourniegtourniegtournie

Phù hiệu vàng 3.9231 Huy hiệu bạc22 Huy hiệu đồng1 gold badge19 silver badges22 bronze badges

4

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

/^/

9

Nếu

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

8, điều này có nghĩa là có một thẻ HTML bên trong

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

9.

Đã trả lời ngày 11 tháng 6 năm 2017 lúc 5:25Jun 11, 2017 at 5:25

1

Mặc dù đây là một chủ đề cũ, tôi chỉ muốn chia sẻ giải pháp tôi đã viết cho nhu cầu của mình:

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

0

Nó sẽ bao gồm hầu hết các trường hợp khó khăn mà tôi đã tìm thấy trong chủ đề này. Được thử nghiệm trên trang này với

isHTML('this is a string') // true
isHTML('this is a string')        // false
isHTML('this is a string') // true

0 và

isHTML('this is a string') // true
isHTML('this is a string')        // false
isHTML('this is a string') // true

1.

Tôi hy vọng nó sẽ hữu ích cho ai đó. :)

Đã trả lời ngày 3 tháng 6 năm 2021 lúc 12:53Jun 3, 2021 at 12:53

2

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

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

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

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

1

Bạn có thể thấy mô hình này được sử dụng để chống lạ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 được tạo ra bởi wysiwyg- hoặc từ được tạo ra và một loạt các tài liệu tham khảo thực thể nhân vật.

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

Thông số kỹ thuật HTML bị mất một cách gây sốc về những gì nó coi là một tài liệu HTML. Các trình duyệt đi đến độ dài cực kỳ để phân tích hầu hết mọi văn bản rác như HTML. Hai cách tiếp cận: Chỉ cần xem xét mọi thứ HTML (vì nếu được phân phối với loại nội dung

isHTML('this is a string') // true
isHTML('this is a string')        // false
isHTML('this is a string') // true

2, sẽ nỗ lực rất nhiều để cố gắng giải thích nó là HTML bởi tác nhân người dùng) hoặc tìm kiếm điểm đánh dấu tiền tố:

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

2

Về mặt "tính hình thành tốt", 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 100%, có hiệu lực hoàn toàn có chứa mọi thành phần HTML mà bạn nghĩ là đang bị bỏ qua:

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

3

Chuẩn rồi. Có các quy tắc rõ ràng về cách hình thành các yếu tố "thiếu" như

isHTML('this is a string') // true
isHTML('this is a string')        // false
isHTML('this is a string') // true

3,

isHTML('this is a string') // true
isHTML('this is a string')        // false
isHTML('this is a string') // true

4 và

isHTML('this is a string') // true
isHTML('this is a string')        // false
isHTML('this is a string') // true

5. Mặc dù tôi thấy khá thú vị khi việc làm nổi bật cú pháp của SO không thể phát hiện đúng điều đó mà không có gợi ý rõ ràng.

Đã trả lời ngày 5 tháng 2 năm 2020 lúc 14:25Feb 5, 2020 at 14:25

Amcgregoramcgregoramcgregor

1.17111 Huy hiệu bạc29 Huy hiệu đồng11 silver badges29 bronze badges

Vì yêu cầu ban đầu không nói rằng giải pháp phải là một regexp, chỉ cần một nỗ lực sử dụng regexp đã được thực hiện. Tôi sẽ cung cấp điều này. Nó nói một cái gì đó là HTML nếu một phần tử con duy nhất có thể được phân tích cú pháp. Lưu ý, điều này sẽ trả về sai nếu cơ thể chỉ chứa các bình luận hoặc CDATA hoặc chỉ thị máy chủ.

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

4

Đã trả lời ngày 11 tháng 12 năm 2020 lúc 16:10Dec 11, 2020 at 16:10

Bất cứ điều gìAnyWhichWay

6268 Huy hiệu bạc10 Huy hiệu Đồng8 silver badges10 bronze badges

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

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

5

Đã trả lời ngày 8 tháng 12 năm 2019 lúc 12:16Dec 8, 2019 at 12:16

1

Tôi cần một cái gì đó tương tự cho chuỗi XML. Tôi sẽ đặt những gì tôi nghĩ ra ở đây trong trường hợp nó có thể hữu ích cho bất cứ ai ..

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

6

Đã trả lời ngày 12 tháng 5 năm 2021 lúc 12:38May 12, 2021 at 12:38

Nikonikoniko

Phù hiệu bằng đồng 9044 bronze badges

Đây là một cách tiếp cận không có regex mà tôi đã sử dụng cho dự án của riêng mình.

Nếu bạn đang cố gắng phát hiện chuỗi HTML trong số các chuỗi không phải HTML khác, bạn có thể chuyển đổi thành đối tượng trình phân tích cú pháp HTML và sau đó quay lại để xem độ dài chuỗi có khác nhau không. I E.:

Một ví dụ thực hiện Python như sau:

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

7

Nó đã làm việc trên mẫu của tôi gồm 2800 chuỗi.

Mã giả sẽ là

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

8

Điều này làm việc cho tôi trong trường hợp thử nghiệm của tôi, và nó có thể làm việc cho bạn.

Đã trả lời ngày 28 tháng 1 năm 2021 lúc 19:45Jan 28, 2021 at 19:45

1

Câu trả lời được bình chọn nhiều nhất xác nhận chuỗi sau đây là mẫu HTML khi rõ ràng nó không phải là:

isHTML('this is a string') // true
isHTML('this is a string')        // false
isHTML('this is a string') // true

6

Một cách tiếp cận tốt hơn sẽ là

isHTML('this is a string') // true
isHTML('this is a string')        // false
isHTML('this is a string') // true

7 có thể được hình dung ở đây.

Xem thêm Tiêu chuẩn HTML để biết thêm thông tin.

Mẫu này sẽ không xác thực tài liệu HTML của bạn mà là thẻ HTML. Rõ ràng vẫn còn chỗ cho các cải tiến, bạn càng cải thiện nó, bạn càng sớm nhận được một mẫu xác thực HTML rất phức tạp, điều mà bạn muốn tránh.

Example::

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

9

Đã trả lời ngày 30 tháng 8 lúc 18:28Aug 30 at 18:28

Eugen Mihailescueugen MihailescuEugen Mihailescu

3.3782 Huy hiệu vàng29 Huy hiệu bạc29 Huy hiệu đồng2 gold badges29 silver badges29 bronze badges

programming javascript DOMParser Regex HTML Regex parse HTML Contains JavaScript

Hướng dẫn how do you check if a string is html or not using javascript? - làm cách nào để kiểm tra xem một chuỗi có phải là html hay không bằng javascript?

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

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

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội