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 }; } };