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

Question

那么，问题来了……

我必须：

1. 通过带有 AJAX 调用的 REST API 获取 html 页面，
2. 从该 html 中提取具有已知 id 的表（谢天谢地，该表格式正确）
3. 从样式块中提取表格的关联 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');

您的用例可能需要一些微调，但这应该大致为您提供您所追求的。