Hướng dẫn display formatted xml in html textarea - hiển thị xml được định dạng trong html textarea

2

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi có một trang mà người dùng có thể thêm đánh dấu XML vào đầu vào vùng văn bản. Tôi muốn sau khi họ nhập nó rằng nó được mã hóa màu và được định dạng vì XML sẽ trông trong một IDE như Visual Studio. Bất cứ ai cũng biết về một tập lệnh hoặc công cụ cho phép điều này trong trình duyệt phía máy khách?

hỏi ngày 19 tháng 6 năm 2009 lúc 17:13Jun 19, 2009 at 17:13

James Alexanderjames AlexanderJames Alexander

5.98210 Huy hiệu vàng41 Huy hiệu bạc56 Huy hiệu Đồng10 gold badges41 silver badges56 bronze badges

Hãy xem Codemirror, một trình soạn thảo cao trong cú pháp trong JavaScript cho các trình duyệt. Đây là một ví dụ cho chỉnh sửa XML.

Đã trả lời ngày 19 tháng 6 năm 2009 lúc 17:23Jun 19, 2009 at 17:23

Brian Agnewbrian AgnewBrian Agnew

264K36 Huy hiệu vàng330 Huy hiệu bạc434 Huy hiệu Đồng36 gold badges330 silver badges434 bronze badges

0

Câu trả lời ngắn gọn: Bạn không thể.you can't.

Không phải trong một TEXTAREA, như người ở đây trong như vậy.

Ví dụ trong SO rất tốt, vì nó có TEXTAREA nơi chúng tôi nhập văn bản và hộp DIV bên dưới nơi bạn có thể thấy những gì bạn gõ được định dạng.

Bạn cũng có thể trải qua contentEditable = "true", nhưng đó là một nỗi đau thực sự khi làm điều đó đúng cách ...

Đã trả lời ngày 19 tháng 6 năm 2009 lúc 17:19Jun 19, 2009 at 17:19

Một lựa chọn tốt sẽ là thế này: Vkbeautify

Đây là một ví dụ:

(function() {

function createShiftArr(step) {

	var space = '    ';
	
	if ( isNaN(parseInt(step)) ) {  // argument is string
		space = step;
	} else { // argument is integer
		switch(step) {
			case 1: space = ' '; break;
			case 2: space = '  '; break;
			case 3: space = '   '; break;
			case 4: space = '    '; break;
			case 5: space = '     '; break;
			case 6: space = '      '; break;
			case 7: space = '       '; break;
			case 8: space = '        '; break;
			case 9: space = '         '; break;
			case 10: space = '          '; break;
			case 11: space = '           '; break;
			case 12: space = '            '; break;
		}
	}

	var shift = ['\n']; // array of shifts
	for(ix=0;ix<100;ix++){
		shift.push(shift[ix]+space); 
	}
	return shift;
}

function vkbeautify(){
	this.step = '    '; // 4 spaces
	this.shift = createShiftArr(this.step);
};

vkbeautify.prototype.xml = function(text,step) {

	var ar = text.replace(/>\s{0,}<")
				 .replace(/ or  -1) { 
				str += shift[deep]+ar[ix];
				inComment = true; 
				// end comment  or  //
				if(ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1 || ar[ix].search(/!DOCTYPE/) > -1 ) { 
					inComment = false; 
				}
			} else 
			// end comment  or  //
			if(ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1) { 
				str += ar[ix];
				inComment = false; 
			} else 
			//  //
			if( /^<\w/.exec(ar[ix-1]) && /^<\/\w/.exec(ar[ix]) &&
				/^<[\w:\-\.\,]+/.exec(ar[ix-1]) == /^<\/[\w:\-\.\,]+/.exec(ar[ix])[0].replace('/','')) { 
				str += ar[ix];
				if(!inComment) deep--;
			} else
			 //  //
			if(ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) == -1 && ar[ix].search(/\/>/) == -1 ) {
				str = !inComment ? str += shift[deep++]+ar[ix] : str += ar[ix];
			} else 
			 // ... //
			if(ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) > -1) {
				str = !inComment ? str += shift[deep]+ar[ix] : str += ar[ix];
			} else 
			//  //
			if(ar[ix].search(/<\//) > -1) { 
				str = !inComment ? str += shift[--deep]+ar[ix] : str += ar[ix];
			} else 
			//  //
			if(ar[ix].search(/\/>/) > -1 ) { 
				str = !inComment ? str += shift[deep]+ar[ix] : str += ar[ix];
			} else 
			//  //
			if(ar[ix].search(/<\?/) > -1) { 
				str += shift[deep]+ar[ix];
			} else 
			// xmlns //
			if( ar[ix].search(/xmlns\:/) > -1  || ar[ix].search(/xmlns\=/) > -1) { 
				str += shift[deep]+ar[ix];
			} 
			
			else {
				str += ar[ix];
			}
		}
		
	return  (str[0] == '\n') ? str.slice(1) : str;
}

window.vkbeautify = new vkbeautify();

})();

var xmlData = 'ToveJaniReminderDon\'t forget me this weekend!';
xmlData = vkbeautify.xml(xmlData);
$('textarea').val(xmlData);

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

MahavirmahavirMahavir

3224 Huy hiệu bạc7 Huy hiệu đồng4 silver badges7 bronze badges

0

Làm thế nào hiển thị dữ liệu XML trong HTML bằng cách sử dụng jQuery?

Làm thế nào bao gồm tệp XML trong HTML?

Làm cách nào để xem dữ liệu XML?

Chúng ta có thể viết mã XML bằng HTML không?