ตรวจสอบว่าสตริงเป็น html หรือไม่

ฉันมีสตริงที่ต้องการตรวจสอบว่าเป็น html หรือไม่ ฉันใช้ regex เหมือนกัน แต่ไม่ได้ผลลัพธ์ที่เหมาะสม

ผมตรวจสอบ regex ของฉันและมันทำงานได้ดีที่นี่

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

นี่คือซอ แต่ regex ไม่ได้ทำงานอยู่ที่นั่น http://jsfiddle.net/wFWtc/

ในเครื่องของฉันรหัสทำงานได้ดี แต่ฉันได้ผลลัพธ์เป็นเท็จแทนที่จะเป็นจริง มีอะไรหายไปที่นี่?

regex ที่ดีกว่าที่จะใช้ตรวจสอบว่าสตริงเป็น 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( nodeTypeจาก 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);
}

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

นี้ไม่เหมาะสมการตรวจสอบเนื่องจากมีทั้งหมดแท็กคนที่ว่างเปล่าก่อนตามด้วยส่วนที่เหลือซึ่งจะต้องมีแท็กปิด

อธิบายการสาธิตที่นี่: 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'>")

หากคุณกำลังสร้าง regex จากสตริงลิเทอรัลคุณต้องหลีกเลี่ยงแบ็กสแลช:

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

สิ่งนี้ไม่จำเป็นหากคุณใช้ตัวอักษร regex แต่คุณต้องหลีกเลี่ยงเครื่องหมายทับ:

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

นอกจากนี้ jsfiddle ของคุณไม่ทำงานเนื่องจากคุณกำหนดonloadตัวจัดการภายในตัวจัดการอื่นonloadค่าเริ่มต้นตามที่ตั้งไว้ในพาเนล Frameworks & Extensions ทางด้านซ้ายคือการรวม JS ในonloadไฟล์. เปลี่ยนเป็นตัวเลือก 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 HTMLtextStging

มีโซลูชันที่น่าสนใจที่เกี่ยวข้องกับการใช้เบราว์เซอร์เพื่อพยายามแยกวิเคราะห์ข้อความโดยระบุว่ามีการสร้างโหนด DOM หรือไม่ซึ่งจะ ... ช้า หรือนิพจน์ทั่วไปซึ่งจะเร็วกว่า แต่ ... อาจไม่ถูกต้อง นอกจากนี้ยังมีคำถามสองข้อที่แตกต่างกันมากที่เกิดจากปัญหานี้:

Q1: สตริงมีเศษ HTML หรือไม่

เป็นสตริง ส่วนของเอกสาร HTML ที่มีมาร์กอัปองค์ประกอบ HTML หรือเอนทิตีที่เข้ารหัสหรือไม่ สิ่งนี้สามารถใช้เป็นตัวบ่งชี้ว่าสตริงอาจต้องการการฟอกสี / การฆ่าเชื้อหรือการถอดรหัสเอนทิตี:

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

คุณสามารถเห็นรูปแบบนี้ที่ใช้กับตัวอย่างทั้งหมดจากคำตอบที่มีอยู่ทั้งหมดในขณะที่เขียนนี้รวมถึงบางส่วน ... ข้อความตัวอย่างที่สร้างขึ้นด้วย WYSIWYG หรือ Word ที่ค่อนข้างน่ากลัวและการอ้างอิงเอนทิตีอักขระต่างๆ

Q2: สตริงเป็นเอกสาร HTML หรือไม่

ข้อกำหนด HTML จะเขย่าขวัญหลวมเป็นสิ่งที่จะมีการพิจารณาเอกสาร เบราว์เซอร์ใช้ความยาวมากในการแยกวิเคราะห์ข้อความขยะเกือบทั้งหมดเป็น HTML สองแนวทาง: พิจารณาทุกอย่างของ 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 คือ-html ที่สามารถพยายามแก้ปัญหานี้https://github.com/sindresorhus/is-html