Question

I have a string that has html / CSS in it ( The string is created using rich text editor). The data is used by multiple applications, some applications use the format as is, some try to apply new format to the data. We dont have any issues with html, since its easy to remove those data.

I am not sure what’s the best way to remove a particular CSS from the string.FYI…Some string might not contain CSS….I am thinking of using regular expression.. but not quite sure if it is a foolproof way….

I know we can use the below way to remove

document.getElementById("whatever").className = "";
$('whatever').remmoveClass();

but this removes all the CSS styles.

For Ex: I need to remove just the below inline CSS from the text below

<style type="text/css"> p { text-indent: 0pt;padding: 0px 0px 0px 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 12px;margin-left: 0px;text-align: left;font-family: 'Verdana';font-style: Normal;font-weight: normal;font-size: 16px;color: #000000; } .defaultDocumentStyle { telerik-style-type: default;telerik-style-name: defaultDocumentStyle;font-family: 'Verdana';font-style: Normal;font-weight: bold;font-size: 10.6700000762939px;margin-bottom: 12px; } </style><p><span>ddfggfg</span></p>

I need just need ddfggfg

EDIT: The string might not necessarily be a html string since they can use the simple text editor too hence I cant assume the string will contain HTML.

I have this issue mainly when exporting the data to CSV / PDF. The inline CSS class gets exported along with the data.

Thanks,
Barani

Answer 1

You need to parse the HTML and remove the style="" and perhaps class="" attributes.

Using jQuery:

var dom = $('<div>' + source + '</div>');
dom.find('*').removeAttr('style');
var cleaned = dom.html();

You may also want to .find('style') and .remove() them.