javascript - แยกวิเคราะห์สตริง HTML ด้วย JS

ฉันต้องการแยกวิเคราะห์สตริงซึ่งมีข้อความ HTML ฉันต้องการทำมันใน JavaScript

ฉันได้ลองใช้ไลบรารี Pure JavaScript HTML Parser แต่ดูเหมือนว่ามันจะแยกวิเคราะห์ HTML ของหน้าปัจจุบันของฉัน ไม่ใช่จากสตริง เพราะเมื่อฉันลองโค้ดด้านล่าง มันจะเปลี่ยนชื่อเรื่องของหน้าของฉัน:

var parser = new HTMLtoDOM("<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>", document);

เป้าหมายของฉันคือการดึงลิงก์จากหน้า HTML ภายนอกที่ฉันอ่านเหมือนกับสตริง

คุณรู้จัก API ที่สามารถทำได้ไหม?

คำตอบ #1

สร้างองค์ประกอบ DOM แบบจำลองแล้วเพิ่มสตริงลงไป จากนั้นคุณสามารถจัดการมันเหมือนองค์ประกอบ DOM ใด ๆ

var el = document.createElement( 'html' );
el.innerHTML = "<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>";

el.getElementsByTagName( 'a' ); // Live NodeList of your anchor elements

แก้ไข: เพิ่มคำตอบของ jQuery เพื่อเอาใจแฟน ๆ!

var el = $( '<div></div>' );
el.html("<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>");

$('a', el) // All the anchor elements

คำตอบ #2

มันค่อนข้างง่าย:

const parser = new DOMParser();
const htmlDoc = parser.parseFromString(txt, 'text/html');
// do whatever you want with htmlDoc.getElementsByTagName('a');

ตาม MDN ในการทำเช่นนี้ใน Chrome คุณจำเป็นต้องทำการแยกวิเคราะห์เป็น XML ดังนี้:

const parser = new DOMParser();
const htmlDoc = parser.parseFromString(txt, 'text/xml');
// do whatever you want with htmlDoc.getElementsByTagName('a');

ขณะนี้ยังไม่รองรับโดย webkit และคุณจะต้องปฏิบัติตามคำตอบของ Florian และยังไม่ทราบว่าจะทำงานในกรณีส่วนใหญ่บนเบราว์เซอร์มือถือหรือไม่

แก้ไข: ตอนนี้ได้รับการสนับสนุนอย่างกว้างขวาง

คำตอบ #3

แก้ไข: วิธีแก้ปัญหาด้านล่างนี้ใช้ได้เฉพาะ "ชิ้นส่วน" ของ HTML เนื่องจาก html, head และ body ถูกลบออก ฉันเดาว่าวิธีแก้ปัญหาสำหรับคำถามนี้คือวิธี parseFromString() ของ DOMParser:

const parser = new DOMParser();
const document = parser.parseFromString(html, "text/html");

สำหรับชิ้นส่วน HTML โซลูชันที่ระบุไว้ที่นี่ใช้ได้กับ HTML ส่วนใหญ่ อย่างไรก็ตามในบางกรณีอาจใช้ไม่ได้

ตัวอย่างเช่น ลองแยกวิเคราะห์ <td>Test</td> อันนี้จะใช้ไม่ได้กับวิธี div.innerHTML, DOMParser.prototype.parseFromString หรือ range.createContextualFragment แท็ก td จะหายไปเหลือเพียงข้อความเท่านั้น

มีเพียง jQuery เท่านั้นที่จัดการกรณีนั้นได้ดี

ดังนั้นทางออกในอนาคต (MS Edge 13+) คือการใช้แท็กเทมเพลต:

function parseHTML(html) {
    var t = document.createElement('template');
    t.innerHTML = html;
    return t.content;
}

var documentFragment = parseHTML('<td>Test</td>');

สำหรับเบราว์เซอร์รุ่นเก่าฉันได้แยกวิธี parseHTML() ของ jQuery ออกมาเป็น gist อิสระ - https://gist.github.com/Munawwar/6e6362dbdf77c7865a99

คำตอบ #4

var doc = new DOMParser().parseFromString(html, "text/html");
var links = doc.querySelectorAll("a");