如何从字符串中删除CSS?

时间:2014-02-26 05:30:29

标签: ruby-on-rails ruby ruby-on-rails-4

我使用了以下代码的Sanitize Ruby gem:

result = Sanitize.clean(html)

它从页面中提取内容,但我仍然在清理结果中使用此CSS。我如何摆脱它,所以我只有页面文本?

#fsb-social-bar { width: 100%; border-bottom: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb; padding: 10px 0; margin: 0px 0 20px 0; float: left; background: #fff; position: relative; clear: both; } #fsb-social-bar a { border: 0px !important } #fsb-social-bar.fsb-fixed { position: fixed; top: -2px; z-index: 99999; } #fsb-social-bar .fsb-title { display: block; float: left; margin: 3px 20px 0 0; font-size: 16px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; color: #333; } #fsb-social-bar .fsb-share-facebook { width: 120px; float: left; padding: 3px 0 2px; height: 25px; } #fsb-social-bar .fsb-share-facebook.fsb-hide-count { width: 44px; overflow: hidden; margin-right: 30px; } #fsb-social-bar .fsb-share-twitter { float: left; width: 135px; padding: 3px 0 2px; height: 25px; } #fsb-social-bar .fsb-share-twitter.fsb-hide-count { width: 61px; overflow: hidden; margin-right: 30px; } #fsb-social-bar .fsb-share-google { float: left; width: 105px; padding: 3px 0 2px; height: 25px; } #fsb-social-bar .fsb-share-google.fsb-hide-count { width: 33px; overflow: hidden; margin-right: 30px; } #fsb-social-bar .fsb-share-linkedin { float: left; width: 135px; padding: 3px 0 2px; height: 25px; } #fsb-social-bar .fsb-share-linkedin.fsb-hide-count { width: 61px; overflow: hidden; margin-right: 30px; } #fsb-social-bar .fsb-share-pinterest { float: left; width: 115px; padding: 3px 0 2px; height: 25px;} #fsb-social-bar .fsb-share-pinterest.fsb-hide-count { width: 43px; overflow: hidden; margin-right: 30px; } #fsb-social-bar .socialite { display: block; position: relative; background: url(http://www.example.net/wp-content/plugins/floating-social-bar/images/fsb-sprite.png) no-repeat scroll 0 0; } #fsb-social-bar .socialite-loaded { background: none !important; } #fsb-social-bar .fsb-service-title { display: none; } #fsb-social-bar a { color: #333; text-decoration: none; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } #fsb-social-bar .fsb-twitter { width: 105px; height: 25px; background-position: -13px -10px; line-height: 25px; vertical-align: middle; } #fsb-social-bar .fsb-twitter .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 69px; color: #333; } #fsb-social-bar .fsb-google { width: 75px; height: 25px; background-position: -136px -10px; line-height: 25px; vertical-align: middle; } #fsb-social-bar .fsb-google .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 41px; color: #333; } #fsb-social-bar .fsb-google .socialite-button { margin: 0 !important; } #fsb-social-bar .fsb-share-google .socialite-loaded .socialite-button{padding: 2px 0 0} #fsb-social-bar .fsb-facebook { width: 89px; height: 25px; background-position: -231px -10px; line-height: 25px; vertical-align: middle; } #fsb-social-bar .fsb-facebook .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 52px; color: #333; } #fsb-social-bar .fsb-facebook .socialite-button { margin: 0 !important;} #fsb-social-bar .fsb-share-facebook .socialite-loaded .socialite-button {padding: 2px 0 0} #fsb-social-bar .fsb-linkedin { width: 105px; height: 25px; background-position: -347px -10px; line-height: 25px; vertical-align: middle; } #fsb-social-bar .fsb-linkedin .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 70px; color: #333; } #fsb-social-bar .fsb-linkedin .socialite-button { margin: 0 !important; } #fsb-social-bar .fsb-pinterest { width: 88px; height: 25px; background-position: -484px -10px; line-height: 25px; vertical-align: middle; } #fsb-social-bar .fsb-pinterest .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 50px; color: #333; } #fsb-social-bar .fsb-pinterest .socialite-button { margin: 0 !important; } #fsb-social-bar .fsb-clear { clear: both; } #fsb-social-bar .fsb-clear:after { clear:both; content:; display:block; height:0; line-height:0; overflow:auto; visibility:hidden; zoom:1; } @media (max-width: 768px) { #fsb-social-bar.fsb-fixed { position: relative !important; top: auto !important; } } Facebook2 Twitter1 Google+0 LinkedIn0 Pinterest0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nisl auctor, dignissim odio vel, suscipit velit. Vivamus pretium velit quis sapien scelerisque ullamcorper. Vivamus ullamcorper lacus non magna suscipit laoreet. In hac habitasse platea dictumst. Nulla aliquam dolor nec neque auctor pretium. Nullam vitae enim nisl. In imperdiet lacinia nunc at congue. Aliquam posuere nulla vel ornare accumsan. Fusce vitae sapien et nulla fringilla congue quis eu tellus. Nunc vestibulum turpis eget convallis cursus. Integer ut sapien molestie odio interdum luctus. Vestibulum urna justo, sagittis ut sodales eu, rutrum a magna. Proin consequat convallis nibh vel semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque eu purus quis massa lobortis eleifend.

解决方案不仅需要处理此文本,还需要处理可能碰巧拥有CSS的任何字符串。谢谢你的帮助。

1 个答案:

答案 0 :(得分:6)

如果你的CSS代码在样式标记内,你可以使用这个:

Sanitize.clean(content, :remove_contents => ['script', 'style'])

其他解决方案是css_transformer.rb

相关问题