Javascript JQuery replace tags

Question

I have a contenteditable area and when the user has finished editing I will save the data to a file. When a user uses first one browser and then another the different styles created by the contenteditables leads to messy and incompatible code.

I was wondering if there was any way to replace the <span style="font-weight:bold">XXX</span> tags created in Chrome with 'standard' tags such as <b>xxx</b>.

Thanks in advance

Jai · Accepted Answer · 2014-01-31 11:39:56Z

4

you can try this:

$('span').each(function(){ // iterate to the all the spans
    if($(this).css('font-weight') == 'bold'){  // check if font is bold
       $(this).contents().unwrap().wrap('<b></b>'); 
    }  // unwrap the content and wrap it
});

So, what going on here is:

Iterate through all the spans in your document
check if the css style is "bold"
if true then first unwrap the contents it holds and wrap it with the tags of your choice

so similarly you have to check for all other css styles separately and replace/wrap it accordingly.

edited Jan 31, 2014 at 11:39

answered Jan 31, 2014 at 11:29

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StorySystems Over a year ago

Thanks, will require a new if for each command, but should be fine.

Milind Anantwar · Accepted Answer · 2014-01-31 11:32:59Z

1

Use:

$('span').each(function(){ // iterate to the all the spans
  if($(this).css("font-weight") == "bold"){  //
  $(this).contents().unwrap().wrap('<b></b>');
 }
});

Working Demo

edited Jan 31, 2014 at 11:32

answered Jan 31, 2014 at 11:27

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

2 Comments

StorySystems Over a year ago

I need to replace the bold with b tags, the underline with u etc. I don't see how this code can discern between these differences

Milind Anantwar Over a year ago

@StorySystems: did not read that part. Updated code and demo now.

Collectives™ on Stack Overflow

Javascript JQuery replace tags

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related