有许多在线工具可以进行这种转换,因此您可以从 Google Apps Script 中利用其中一种工具。(如果您只需要偶尔执行一次,为什么不只使用其中一项服务呢?)
这是一个示例脚本,它建立在 Google Apps 脚本是否具有 getElementById 之类的getElementByVal()
功能?.
内联()函数
/**
* Convert html containing <style> tags to instead have inline css.
*
* This example uses an online service from MailChimp Labs, but
* the same principle could be used to leverage several other
* online providers.
*
* @param {Text} htmlWstyle A block of HTML text including
* <style>..</style> tags.
*
* @returns {Text} Same HTML, converted to inline css.
*/
function inline(htmlWstyle) {
// Generate a POST request to inline css web tool.
var payload =
{
"html" : htmlWstyle,
"strip" : "checked"
};
// Because payload is a JavaScript object, it will be interpreted as
// an HTML form. (We do not need to specify contentType; it will
// automatically default to either 'application/x-www-form-urlencoded'
// or 'multipart/form-data')
var options =
{
"method" : "post",
"payload" : payload,
"muteHttpExceptions" : true
};
var url = "http://beaker.mailchimp.com/inline-css";
var response = UrlFetchApp.fetch(url, options);
// The html from this service is non-compliant, so we need
// to massage it to satisfy the XmlService.
var badlink = new RegExp('<link (.*?)[\/]*>',"igm");
var badmeta = new RegExp('<meta (.*?)[\/]*>',"igm");
var badinput = new RegExp('<input (.*?)[\/]*>',"igm");
var xml = response.getContentText()
.replace(badlink,"<link $1></link>" )
.replace(badinput,"<input $1></input>" )
.replace(badmeta,"<meta $1></meta>" )
.replace(/<br>/g,"<br/>");
// So far, so good! Next, extract converted text from page. <textarea name="text" ...>
// Put the receieved xml response into XMLdocument format
var doc = XmlService.parse(xml);
var inlineHTML = getElementByVal( doc, 'textarea', 'name', 'text' );
return (inlineHTML == null) ? null : inlineHTML.getValue();
}
解释
那里似乎有一些黑魔法。先前的答案描述了如何使用旧的 Xml 服务来检查网页的结构以找到您想要的位。它仍然是很好的阅读(并且投票,提示,提示!),但是该服务现在已经消失了,新的XmlService没有等效的探索性支持。
首先,我们找到了一个完成我们感兴趣的工作的 Web 服务,并使用UrlFetch 服务来模拟一个人将代码粘贴到服务中。理想情况下,我们想要一个只返回我们想要的结果的格式,我们可以在没有任何进一步工作的情况下使用。唉,我们拥有的是一个完整的网页,这意味着我们必须为我们的结果耕种它。那里的基本思想:使用 XmlService 解析和浏览页面,只提取我们想要的部分。
在选择的 Css Inline 服务中,Chrome 的“检查元素”功能用于确定标签类型 ( <textarea>
) 和唯一标识它的方法 ( name="text"
)。有了这些知识,我们就拥有getElementByVal()
了挖掘 POST 请求返回的 HTML 所需的一切。(或者,您可以使用 String 方法来查找和提取您想要的文本。)
但是当所有这些放在一起时,XmlService 一直在抱怨结果页面中 HTML 的格式——因此在传递页面之前使用 JavaScript String 和 RegExp 方法来平衡格式错误的标签。
例子
这是一个简单的示例,说明该inline()
函数的使用。请注意,样式信息是从外部 css 链接和标记样式中吸收的。
function test_inline() {
var myHtml =
'<html>'
+ '<head>'
+ '<title>Example</title>'
+ '<link rel="stylesheet" href="http://inlinestyler.torchboxapps.com/static/css/example.css" ></link>'
+ '</head>'
+ '<body>'
+ '<style type="text/css">'
+ 'h1{'
+ 'color:yellow'
+ '}'
+ '</style>'
+ '<h1>An example title</h1>'
+ '<p>Paragraph 1</p>'
+ '<p class="p2">Paragraph 2</p>'
+ '</body>'
+ '</html>';
var inlined = inline(myHtml);
debugger; // pause in debugger, have a look at "inlined"
}
结果
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 style="color: yellow;">An example title</h1>
<p style="margin: 0;padding: 0 0 10px 0;">Paragraph 1</p>
<p class="p2" style="margin: 0;padding: 0 0 10px 0;">Paragraph 2</p>
</body>
</html>