Hướng dẫn how do i parse a string in html? - làm cách nào để phân tích cú pháp một chuỗi trong html?

Hôm qua, tôi đã viết về rạn san hô, sự thay thế nhẹ của tôi cho Vue và React. Trong vài ngày tới, tôi muốn xem cách các phần khác nhau của nó hoạt động dưới thời trang.

Hôm nay, chúng tôi sẽ xem xét cách lấy một chuỗi HTML và chuyển đổi nó thành đánh dấu thực tế.

Tại sao bạn cần điều này

Nếu bạn muốn tiêm một chuỗi vào DOM, bạn có thể làm điều đó khá đơn giản với innerHTML.

app.innerHTML = '
Hello, world!
';

Nhưng rạn san hô không chỉ đẩy đánh dấu vào một yếu tố. Nó so sánh đánh dấu hiện có trong một yếu tố với cách nhìn và chỉ cập nhật những thứ cần thay đổi.

Ví dụ: nếu nội dung hiện có bên trong app là:

Rạn san hô sẽ chỉ cập nhật văn bản bên trong

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

Để nó hoạt động, chúng ta cần chuyển đổi chuỗi HTML thành các phần tử HTML thực tế có thể đi qua, ánh xạ và phân tích.

Tạo phương pháp trợ giúp

Đầu tiên, hãy để tạo ra một hàm trợ giúp sẽ chấp nhận một chuỗi và trả về HTML.

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

Cách tiếp cận đơn giản

Cách đơn giản nhất để làm điều này là tạo một phần tử, chèn chuỗi vào với innerHTML, sau đó trả về phần tử.

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	var dom = document.createElement('div');
	dom.innerHTML = str;
	return dom;
};

Cách tiếp cận này là hoàn hảo, mặc dù.

Mặc dù yếu tố này được tách ra, đó là, không thực sự trong DOM hiện tại, trình duyệt vẫn sẽ làm những việc như tải xuống các tệp hình ảnh.

Điều này sẽ kích hoạt một tệp hình ảnh để tải xuống, mặc dù đánh dấu không được hiển thị ở bất cứ đâu.

stringToHTML('
');

Một cách tốt hơn

Sau khi thực hiện một loạt các nghiên cứu, tôi đã phát hiện ra một phương pháp trình duyệt gốc để tránh vấn đề này:

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

Để sử dụng nó, bạn khởi tạo một thể hiện mới. Sau đó, bạn sử dụng phương thức

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

Bởi vì nó có nghĩa đen là một yếu tố

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	var parser = new DOMParser();
	var doc = parser.parseFromString(str, 'text/html');
	return doc.body;
};

Bây giờ chúng ta có thể làm điều này, và không có tải xuống sẽ được kích hoạt.

stringToHTML('
');

Kết hợp hai cách tiếp cận

Phương pháp

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

Tôi thích kết hợp hai cách tiếp cận, sử dụng

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

Để kiểm tra hỗ trợ, chúng tôi sẽ chỉ định một iife cho biến

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	var dom = document.createElement('div');
	dom.innerHTML = str;
	return dom;
};

Bên trong iife, trước tiên chúng tôi sẽ kiểm tra xem

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	var dom = document.createElement('div');
	dom.innerHTML = str;
	return dom;
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	var dom = document.createElement('div');
	dom.innerHTML = str;
	return dom;
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	var dom = document.createElement('div');
	dom.innerHTML = str;
	return dom;
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	var dom = document.createElement('div');
	dom.innerHTML = str;
	return dom;
};

stringToHTML('
');

var support = (function () {
	if (!window.DOMParser) return false;
	var parser = new DOMParser();
	try {
		parser.parseFromString('x', 'text/html');
	} catch(err) {
		return false;
	}
	return true;
})();

Bên trong phương pháp

stringToHTML('
');

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {

	// If DOMParser is supported, use it
	if (support) {
		var parser = new DOMParser();
		var doc = parser.parseFromString(str, 'text/html');
		return doc.body;
	}

	// Otherwise, fallback to old-school method
	var dom = document.createElement('div');
	dom.innerHTML = str;
	return dom;

};

Ở đây, một bản demo trên Codepen để bạn chơi xung quanh.

Ngày mai, chúng tôi sẽ xem xét cách tạo bản đồ các nút dom mà chúng tôi có thể sử dụng cho Dom Diffing.