js提取html特定字符串,javascript-提取当前DOM并将其打印为字符串，其中包含样式...

我认为这可能是一个解决方案(花了我将近一整天！)。

它返回一个表示任何元素的DOM的字符串，除了默认值外，“样式”属性中包括所有外部样式，并且不会永久修改该元素。

例如：console.log(document.body.serializeWithStyles());

您可以在Web Inspector命令行中或从body元素中的脚本标签而不是head元素中的脚本标签加载此代码，因为它需要存在document.body。

我已经在桌面版Safari 5(我没有移动版)上对其进行了测试。

它是这样的：

对于DOM中的每个元素：

1)在数组中缓存表示内联样式的style.cssText属性的值；

2)在元素上调用getComputedStyle；

3)检查是否有对应于该元素标签名称的css默认值查找表；

4)如果没有的话，建立它；

5)遍历结果，使用查找表查找哪些值不是默认值；

6)将那些非默认样式值应用于元素。

然后存储externalHTML作为结果；

对于每个元素，从缓存中还原内联样式；

返回先前存储的结果。

代码：

Element.prototype.serializeWithStyles = (function () {

// Mapping between tag names and css default values lookup tables. This allows to exclude default values in the result.

var defaultStylesByTagName = {};

// Styles inherited from style sheets will not be rendered for elements with these tag names

var noStyleTags = {"BASE":true,"HEAD":true,"HTML":true,"META":true,"NOFRAME":true,"NOSCRIPT":true,"PARAM":true,"SCRIPT":true,"STYLE":true,"TITLE":true};

// This list determines which css default values lookup tables are precomputed at load time

// Lookup tables for other tag names will be automatically built at runtime if needed

var tagNames = ["A","ABBR","ADDRESS","AREA","ARTICLE","ASIDE","AUDIO","B","BASE","BDI","BDO","BLOCKQUOTE","BODY","BR","BUTTON","CANVAS","CAPTION","CENTER","CITE","CODE","COL","COLGROUP","COMMAND","DATALIST","DD","DEL","DETAILS","DFN","DIV","DL","DT","EM","EMBED","FIELDSET","FIGCAPTION","FIGURE","FONT","FOOTER","FORM","H1","H2","H3","H4","H5","H6","HEAD","HEADER","HGROUP","HR","HTML","I","IFRAME","IMG","INPUT","INS","KBD","KEYGEN","LABEL","LEGEND","LI","LINK","MAP","MARK","MATH","MENU","META","METER","NAV","NOBR","NOSCRIPT","OBJECT","OL","OPTION","OPTGROUP","OUTPUT","P","PARAM","PRE","PROGRESS","Q","RP","RT","RUBY","S","SAMP","SCRIPT","SECTION","SELECT","SMALL","SOURCE","SPAN","STRONG","STYLE","SUB","SUMMARY","SUP","SVG","TABLE","TBODY","TD","TEXTAREA","TFOOT","TH","THEAD","TIME","TITLE","TR","TRACK","U","UL","VAR","VIDEO","WBR"];

// Precompute the lookup tables.

for (var i = 0; i < tagNames.length; i++) {

if(!noStyleTags[tagNames[i]]) {

defaultStylesByTagName[tagNames[i]] = computeDefaultStyleByTagName(tagNames[i]);

}

}

function computeDefaultStyleByTagName(tagName) {

var defaultStyle = {};

var element = document.body.appendChild(document.createElement(tagName));

var computedStyle = getComputedStyle(element);

for (var i = 0; i < computedStyle.length; i++) {

defaultStyle[computedStyle[i]] = computedStyle[computedStyle[i]];

}

document.body.removeChild(element);

return defaultStyle;

}

function getDefaultStyleByTagName(tagName) {

tagName = tagName.toUpperCase();

if (!defaultStylesByTagName[tagName]) {

defaultStylesByTagName[tagName] = computeDefaultStyleByTagName(tagName);

}

return defaultStylesByTagName[tagName];

}

return function serializeWithStyles() {

if (this.nodeType !== Node.ELEMENT_NODE) { throw new TypeError(); }

var cssTexts = [];

var elements = this.querySelectorAll("*");

for ( var i = 0; i < elements.length; i++ ) {

var e = elements[i];

if (!noStyleTags[e.tagName]) {

var computedStyle = getComputedStyle(e);

var defaultStyle = getDefaultStyleByTagName(e.tagName);

cssTexts[i] = e.style.cssText;

for (var ii = 0; ii < computedStyle.length; ii++) {

var cssPropName = computedStyle[ii];

if (computedStyle[cssPropName] !== defaultStyle[cssPropName]) {

e.style[cssPropName] = computedStyle[cssPropName];

}

}

}

}

var result = this.outerHTML;

for ( var i = 0; i < elements.length; i++ ) {

elements[i].style.cssText = cssTexts[i];

}

return result;

}

})();