mip-utils.js
3.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
const cheerio = require('cheerio');
module.exports = {
/**
* 分离 CSS
* @param {*} $
* @param {*} prefix
*/
processStyle($, prefix) {
let css = [];
$('*').each(function(index) {
let $this = $(this);
let localStyle = $this.attr('style');
let className = `yoho-inline-style-${prefix}-${index}`;
if (localStyle) {
css.push(`.${className}{${localStyle}}`);
$this.removeAttr('style');
$this.addClass(className);
}
});
return css.join('');
},
/**
* 替换标签
* @param {*} $
*/
processTag($) {
let css = [];
// mip-anim
$('img[src*=".gif"]').each(function() {
let $this = $(this);
let mipAnim = `<mip-anim layout="responsive" width="350" height="263" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-anim>`; // eslint-disable-line
$this.replaceWith(mipAnim);
});
// mip-img
$('img').each(function() {
let $this = $(this);
let mipImg = `<mip-img layout="responsive" width="350" height="263" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-img>`; // eslint-disable-line
$this.replaceWith(mipImg);
});
// mip-video
$('video').each(function() {
let $this = $(this);
let mipVideo = `<mip-video layout="responsive" width="350" height="263" poster="${$this.attr('poster') || ''}" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-video>`; // eslint-disable-line
$this.replaceWith(mipVideo);
});
// mip-audio
$('audio').each(function() {
let $this = $(this);
let mipAudio = `<mip-audio src="${$this.attr('src')}"></mip-audio>`; // eslint-disable-line
$this.replaceWith(mipAudio);
});
// mip-iframe
$('iframe').each(function() {
let $this = $(this);
let mipIframe = `<mip-iframe layout="responsive" width="350" height="263" src="${$this.attr('src')}" class="${$this.attr('class') || ''}"></mip-iframe>`; // eslint-disable-line
$this.replaceWith(mipIframe);
});
// mip-link
// $('a').each(function() {
// let $this = $(this);
// let mipLink = `<mip-link href="${$this.attr('href')}" class="${$this.attr('class') || ''}"
// title="${$this.attr('title') || ''}">${$this.html()}</mip-link>`; // eslint-disable-line
// $this.replaceWith(mipLink);
// });
// style
$('style').each(function() {
let $this = $(this);
css.push($this.html());
$this.remove();
});
return {
mipHtml: $.html(),
css: css.join('')
};
},
/**
* 处理 HTML 为 MIP 所需要的格式
* @param {*} html HTML
* @param {*} prefix CSS 前缀
*/
process(html = '', prefix = 0) {
let $ = cheerio.load(html, {
decodeEntities: false
});
let inlineStyle = this.processStyle($, prefix); // 必须先处理内联样式
let tagHtml = this.processTag($);
return {
mipHtml: tagHtml.mipHtml,
css: tagHtml.css + inlineStyle
};
}
};