mip-utils.js
3.77 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
const cheerio = require('cheerio');
const _ = require('lodash');
module.exports = {
/**
* 分离 CSS
* @param {*} $
* @param {*} option
*/
processStyle($, option) {
let css = [];
$('*').each(function(index) {
let $this = $(this);
let localStyle = $this.attr('style');
let className = `yoho-inline-style-${option.prefix}-${index}`;
if (localStyle) {
css.push(`.${className}{${localStyle}}`);
$this.removeAttr('style');
$this.addClass(className);
}
});
return css.join('');
},
/**
* 替换标签
* @param {*} $
*/
processTag($, option) {
let css = [];
// mip-anim
$('img[src*=".gif"]').each(function() {
let $this = $(this);
let mipAnim = `<mip-anim layout="container" 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="container" 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="container" 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="container" src="${$this.attr('src')}" class="${$this.attr('class') || ''}"></mip-iframe>`; // eslint-disable-line
$this.replaceWith(mipIframe);
});
// mip-input
$('input').each(function() {
let $this = $(this);
let mipInput = `<input id="${$this.attr('id')}" type="hidden" value="${$this.val()}">`;
$this.replaceWith(`<mip-form url="https://m.yohobuy.com/">${mipInput}</mip-form>`);
});
// mip-link
if (option.mipLink) {
$('a').each(function() {
let $this = $(this);
let mipLink = `<a data-type="mip" class="${$this.attr('class') || ''}"
href="${$this.attr('href')}">${$this.html()}</a>`;
$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 {*} option.prefix CSS 前缀
*/
process(html = '', option = {prefix: 0}) {
html = _.isString(html) ? html : '';
let $ = cheerio.load(html, {
decodeEntities: false
});
let inlineStyle = this.processStyle($, option); // 必须先处理内联样式
let tagHtml = this.processTag($, option);
return {
mipHtml: tagHtml.mipHtml,
css: tagHtml.css + inlineStyle
};
}
};