javascript - 使用 JQuery 从 HTML 页面中提取嵌入样式

Question

所以，问题来了...

我必须:

1. 通过带有 AJAX 调用的 REST API 获取 html 页面，
2. 从该 html 中提取一个具有已知 id 的表格(谢天谢地，它的格式是正确的)
3. 从样式 block 中提取表格的关联 CSS，
4. 将表格附加到我页面上的一个 div 中，然后
5. 重新应用原来的 CSS

因此，我感兴趣的页面部分是:

<style>
 #tableid td.someclass {
  ...
  }
 #tableid td.anotherclass {
  ...
  }
 [etc etc ..]
</style>

和

<table id="tableid">
 ...
</table>

因此，遍历上述 1、2 和 4 的列表完全没有问题。 3 和 5 是大脑的负担 - 顺便说一句，没有外部样式表可担心，所有内容都在我在单个标签内抓取的页面中。

我想我可以提取整个元素，然后将其附加到我的页面 - 但这很困惑并且可能会导致不需要的副作用。我想做的只是提取适用于 #tableid 的样式，然后将它们应用到附加到我的 div 的表中。

有没有一种优雅的方式来做到这一点？

Answer 1

您可以使用标准的 jQuery 查找器从标题中提取样式:

var styles = $('head style').text();

然后对其运行正则表达式:

var tableID     = 'tableid',
    pattern     = new RegExp('#'+ tableID + '[^}]+}', 'g'),
    tableStyles = styles.match(pattern);

这应该为您的表格 ID 提供一组样式。现在您可以将这些样式附加到当前文档的头部:

$('<style/>', { text: tableStyles.join('\n') }).appendTo('head');

您的用例可能需要一些微调，但这应该可以大致满足您的需求。