<html>
<head>
<meta charset="UTF-8"/>
<title>Html Editor Filter</title>
<style type="text/css">
</style>
</head>
<body>
<div class="my_ed" contenteditable="true"></div>
<div class="format" contenteditable="true"></div>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var HTMLFormat = (function() {
function style_html(html_source, indent_size, indent_character, max_char) {
var Parser, multi_parser;
function Parser() {
this.pos = 0;
this.token = '';
this.current_mode = 'CONTENT';
this.tags = {
parent: 'parent1',
parentcount: 1,
parent1: ''
};
this.tag_type = '';
this.token_text = this.last_token = this.last_text = this.token_type = '';
this.Utils = {
whitespace: "\n\r\t ".split(''),
single_token: 'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed'.split(','),
extra_liners: 'head,body,/html'.split(','),
in_array: function(what, arr) {
for (var i = 0; i < arr.length; i++) {
if (what === arr[i]) {
return true;
}
}
return false;
}
}
this.get_content = function() {
var char = '';
var content = [];
var space = false;
while (this.input.charAt(this.pos) !== '<') {
if (this.pos >= this.input.length) {
return content.length ? content.join('') : ['', 'TK_EOF'];
}
char = this.input.charAt(this.pos);
this.pos++;
this.line_char_count++;
if (this.Utils.in_array(char, this.Utils.whitespace)) {
if (content.length) {
space = true;
}
this.line_char_count--;
continue;
} else if (space) {
if (this.line_char_count >= this.max_char) {
content.push('\n');
for (var i = 0; i < this.indent_level; i++) {
content.push(this.indent_string);
}
this.line_char_count = 0;
} else {
content.push(' ');
this.line_char_count++;
}
space = false;
}
content.push(char);
}
return content.length ? content.join('') : '';
}
this.get_script = function() {
var char = '';
var content = [];
var reg_match = new RegExp('\<\/script' + '\>', 'igm');
reg_match.lastIndex = this.pos;
var reg_array = reg_match.exec(this.input);
var end_script = reg_array ? reg_array.index : this.input.length;
while (this.pos < end_script) {
if (this.pos >= this.input.length) {
return content.length ? content.join('') : ['', 'TK_EOF'];
}
char = this.input.charAt(this.pos);
this.pos++;
content.push(char);
}
return content.length ? content.join('') : '';
}
//檢索標籤
this.record_tag = function(tag) {
if (this.tags[tag + 'count']) {
this.tags[tag + 'count']++;
this.tags[tag + this.tags[tag + 'count']] = this.indent_level;
} else {
this.tags[tag + 'count'] = 1;
this.tags[tag + this.tags[tag + 'count']] = this.indent_level;
}
this.tags[tag + this.tags[tag + 'count'] + 'parent'] = this.tags.parent;
this.tags.parent = tag + this.tags[tag + 'count'];
}
this.retrieve_tag = function(tag) {
if (this.tags[tag + 'count']) {
var temp_parent = this.tags.parent;
while (temp_parent) {
if (tag + this.tags[tag + 'count'] === temp_parent) {
break;
}
temp_parent = this.tags[temp_parent + 'parent'];
}
if (temp_parent) {
this.indent_level = this.tags[tag + this.tags[tag + 'count']];
this.tags.parent = this.tags[temp_parent + 'parent'];
}
delete this.tags[tag + this.tags[tag + 'count'] + 'parent'];
delete this.tags[tag + this.tags[tag + 'count']];
if (this.tags[tag + 'count'] == 1) {
delete this.tags[tag + 'count'];
} else {
this.tags[tag + 'count']--;
}
}
}
//得到的標籤
this.get_tag = function() {
var char = '';
var content = [];
var space = false;
do {
if (this.pos >= this.input.length) {
return content.length ? content.join('') : ['', 'TK_EOF'];
}
char = this.input.charAt(this.pos);
this.pos++;
this.line_char_count++;
if (this.Utils.in_array(char, this.Utils.whitespace)) {
space = true;
this.line_char_count--;
continue;
}
if (char === "'" || char === '"') {
if (!content[1] || content[1] !== '!') {
char += this.get_unformatted(char);
space = true;
}
}
if (char === '=') {
space = false;
}
if (content.length && content[content.length - 1] !== '=' && char !== '>' && space) {
if (this.line_char_count >= this.max_char) {
this.print_newline(false, content);
this.line_char_count = 0;
} else {
content.push(' ');
this.line_char_count++;
}
space = false;
}
content.push(char);
} while (char !== '>');
var tag_complete = content.join('');
var tag_index;
if (tag_complete.indexOf(' ') != -1) {
tag_index = tag_complete.indexOf(' ');
} else {
tag_index = tag_complete.indexOf('>');
}
var tag_check = tag_complete.substring(1, tag_index).toLowerCase();
if (tag_complete.charAt(tag_complete.length - 2) === '/' || this.Utils.in_array(tag_check, this.Utils.single_token)) {
this.tag_type = 'SINGLE';
} else if (tag_check === 'script') {
this.record_tag(tag_check);
this.tag_type = 'SCRIPT';
} else if (tag_check === 'style') {
this.record_tag(tag_check);
this.tag_type = 'STYLE';
} else if (tag_check.charAt(0) === '!') {
if (tag_check.indexOf('[if') != -1) {
if (tag_complete.indexOf('!IE') != -1) {
var comment = this.get_unformatted('-->', tag_complete);
content.push(comment);
}
this.tag_type = 'START';
} else if (tag_check.indexOf('[endif') != -1) {
this.tag_type = 'END';
this.unindent();
} else if (tag_check.indexOf('[cdata[') != -1) {
var comment = this.get_unformatted(']]>', tag_complete);
content.push(comment);
this.tag_type = 'SINGLE';
} else {
var comment = this.get_unformatted('-->', tag_complete);
content.push(comment);
this.tag_type = 'SINGLE';
}
} else {
if (tag_check.charAt(0) === '/') {
this.retrieve_tag(tag_check.substring(1));
this.tag_type = 'END';
} else {
this.record_tag(tag_check);
this.tag_type = 'START';
}
if (this.Utils.in_array(tag_check, this.Utils.extra_liners)) {
this.print_newline(true, this.output);
}
}
return content.join('');
}
//獲取格式化恢復
this.get_unformatted = function(delimiter, orig_tag) {
if (orig_tag && orig_tag.indexOf(delimiter) != -1) {
return '';
}
var char = '';
var content = '';
var space = true;
do {
char = this.input.charAt(this.pos);
this.pos++
if (this.Utils.in_array(char, this.Utils.whitespace)) {
if (!space) {
this.line_char_count--;
continue;
}
if (char === '\n' || char === '\r') {
content += '\n';
for (var i = 0; i < this.indent_level; i++) {
content += this.indent_string;
}
space = false;
this.line_char_count = 0;
continue;
}
}
content += char;
this.line_char_count++;
space = true;
} while (content.indexOf(delimiter) == -1);
return content;
}
this.get_token = function() {
var token;
if (this.last_token === 'TK_TAG_SCRIPT') {
var temp_token = this.get_script();
if (typeof temp_token !== 'string') {
return temp_token;
}
//token = js_beautify(temp_token, this.indent_size, this.indent_character, this.indent_level);
//return [token, 'TK_CONTENT'];
return [temp_token, 'TK_CONTENT'];
}
if (this.current_mode === 'CONTENT') {
token = this.get_content();
if (typeof token !== 'string') {
return token;
} else {
return [token, 'TK_CONTENT'];
}
}
if (this.current_mode === 'TAG') {
token = this.get_tag();
if (typeof token !== 'string') {
return token;
} else {
var tag_name_type = 'TK_TAG_' + this.tag_type;
return [token, tag_name_type];
}
}
}
this.printer = function(js_source, indent_character, indent_size, max_char) {
this.input = js_source || '';
this.output = [];
this.indent_character = indent_character || ' ';
this.indent_string = '';
this.indent_size = indent_size || 2;
this.indent_level = 0;
this.max_char = max_char || 70;
this.line_char_count = 0;
for (var i = 0; i < this.indent_size; i++) {
this.indent_string += this.indent_character;
}
this.print_newline = function(ignore, arr) {
this.line_char_count = 0;
if (!arr || !arr.length) {
return;
}
if (!ignore) {
while (this.Utils.in_array(arr[arr.length - 1], this.Utils.whitespace)) {
arr.pop();
}
}
arr.push('\n');
for (var i = 0; i < this.indent_level; i++) {
arr.push(this.indent_string);
}
}
this.print_token = function(text) {
this.output.push(text);
}
this.indent = function() {
this.indent_level++;
}
this.unindent = function() {
if (this.indent_level > 0) {
this.indent_level--;
}
}
}
return this;
}
multi_parser = new Parser();
multi_parser.printer(html_source, indent_character, indent_size);
while (true) {
var t = multi_parser.get_token();
multi_parser.token_text = t[0];
multi_parser.token_type = t[1];
if (multi_parser.token_type === 'TK_EOF') {
break;
}
switch (multi_parser.token_type) {
case 'TK_TAG_START':
case 'TK_TAG_SCRIPT':
case 'TK_TAG_STYLE':
multi_parser.print_newline(false, multi_parser.output);
multi_parser.print_token(multi_parser.token_text);
multi_parser.indent();
multi_parser.current_mode = 'CONTENT';
break;
case 'TK_TAG_END':
multi_parser.print_newline(true, multi_parser.output);
multi_parser.print_token(multi_parser.token_text);
multi_parser.current_mode = 'CONTENT';
break;
case 'TK_TAG_SINGLE':
multi_parser.print_newline(false, multi_parser.output);
multi_parser.print_token(multi_parser.token_text);
multi_parser.current_mode = 'CONTENT';
break;
case 'TK_CONTENT':
if (multi_parser.token_text !== '') {
multi_parser.print_newline(false, multi_parser.output);
multi_parser.print_token(multi_parser.token_text);
}
multi_parser.current_mode = 'TAG';
break;
}
multi_parser.last_token = multi_parser.token_type;
multi_parser.last_text = multi_parser.token_text;
}
return multi_parser.output.join('');
}
return function(data) {
var dataHolder = ['__dataHolder_', [Math.random(), Math.random(), Math.random(), Math.random()].join('_').replace(/[^0-9]/g, '_'), '_'].join('_');
var dataHolders = {};
var index = 0;
data = data.replace(/(\")(data:[^\"]*)(\")/g, function($0, $1, $2, $3) {
var name = dataHolder + index++;
dataHolders[name] = $2;
return $1 + name + $3;
})
data = style_html(data, 1, '\t', 0x10000000);
data = data.replace(new RegExp(dataHolder + '[0-9]+', 'g'), function($0) {
return dataHolders[$0];
});
return data;
}
})();
//與下面連接到一起
var con = '<div><h5>wwwwww</h5><span>xxx</span><span>xxx</span><span>xxx</span>
<p>dsadad<span>xxx</span><span>xxx</span><span>xxx</span>
<p>dsadad</p></p></div><div><span>xxx</span>
<p>dsadad</p></div><div><span>xxx</span>
<p>dsadad</p>
</div>';
//與上下面連接到一起
var formattedHtml = HTMLFormat(con);$(".format").html(formattedHtml);</script></body></html>
