使用html从变量中删除Style标记

I have a variable with lot of html and inline style tags. I want to remove all style tags from this html variable. I have already used this but it is returning an object and I am not able to get all html from this object. I think it only works with single html element. But i have lot of paragraphs and spans in this html.

我有一个带有大量html和内联样式标签的变量。我想从这个html变量中删除所有样式标记。我已经使用过这个，但它返回一个对象，我无法从这个对象中获取所有的html。我认为它只适用于单个html元素。但我在这个HTML中有很多段落和跨度。

jQuery(content).removeAttr('style');

Your help will be much appreciated.

非常感谢您的帮助。

4 个解决方案

#1

var content = `
<div style="float:left;width:75%;padding-left:30px;">
  <input type="text" name="search" id="search" autocomplete="off" placeholder="Type your Search..." style="width:95%;height:84px;border:solid 0px #fff;background-color:#fff;font-family: 'Open Sans', sans-serif;font-size:30px;font-weight:300;text-transform: uppercase;-moz-box-shadow: 0 0 0 rgba(0,0,0,0);-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);box-shadow: 0 0 0 rgba(0,0,0,0);">
</div>	
<div style="padding:40px 10px 0 0;">
  <div class="hide_1024">PRESS ENTER</div><div class="show_1024">&nbsp;</div>
	<div class="closeDark" onclick="closeSearch();"></div>
</div>	
<div style="clear:both;"></div>
`;


content = jQuery('<div>' + content + '</div>').find('*').removeAttr('style').end().html();

console.log(content);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

#2

You could use the ALL selector

您可以使用ALL选择器

jQuery('*').removeAttr('style');

https://api.jquery.com/all-selector/

https://api.jquery.com/all-selector/

#3

Based on my comment here is the working snippet, I hope it is helps:

基于我的评论，这里是工作片段，我希望它是有帮助的：

var html = '<div><p style="a"></p><p style="a"></p><p style="a"></p><p style="a"></p><p style="a"></p></div>';

var $html = $(html);
$html.find('*').removeAttr('style');

console.log("In:  ", html);
console.log("Out: ", $html.prop('outerHTML'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

#4

Are you asking how to remove the styles off an element and all its children? You can do it simply with a recursive function like so. No need for jquery.

您是否在询问如何删除元素及其所有子元素的样式？你可以使用像这样的递归函数来完成它。不需要jquery。

// Recursively remove styles from a base element.
// Depth first.
function clearStyles(element) {
  for (var i = 0; i < element.childElementCount; i++) {
    clearStyles(element.children[i]);
  };
  element.style = '';
}

clearStyles(document.getElementById(id));