javascript regex replace html

Question

see - > i have the following text in a variable

var s = 

    "<html>
  <head>
    <style type="text/css" >     
      body{
 background:url(/a.png);
          }
    </style>
    <script src="2.js"></script>
    <script src="1.js"></script>
  </head>
  <body >
   {BODYCONTENT}
  </body>


</html>";

Now i want to append some data immediately after closing of <style> tag's > .

Ex :

var mydata = "/n h1{a:b}/n";

So i want

<style>/n h1{a:b}/n

it is very easy if there is no other attribute in style tag,but sometime there may be some other attributes like type ,id

ex :

<style type="text/css" id="default_css_scope">
content
</style>

so that i cant use like this s.replace("<style>","<style>".mydata);

How can i do this with Regular Expression ?

This doesn't answer your question directly, but you may wish to look at "DocumentFragments" as an alternative to regex. This allows you to use dom functions directly on dettached dom elements developer.mozilla.org/en/DOM/DocumentFragment ejohn.org/blog/dom-documentfragments — Alex KeySmith
– Alex KeySmith, Commented Nov 25, 2011 at 11:52
@AlexKey Actually i am not going to render this at this time,i am making a WYSWYG editor,so its not a good idea to use DOm methods better than string manipulation. — Red
– Red, Commented Nov 25, 2011 at 11:54
is there any difference put this "/n h1{a:b}/n" after <style> and before </style>. — erimerturk
– erimerturk, Commented Nov 25, 2011 at 11:57
Cool, that makes sense. Must admit I'm not a Regex guru, but this site provides a nice online editor that's helped me in the past: gskinner.com/RegExr — Alex KeySmith
– Alex KeySmith, Commented Nov 25, 2011 at 11:59
@erimerturk heheh..cool dude...you mad this Question absolutely waste. — Red
– Red, Commented Nov 25, 2011 at 12:08

erimerturk · Accepted Answer · 2011-11-25 12:00:08Z

3

maybe you should try this. i think it will solve your problem.

 str= str.replace("</style>",mydata+"</style>");

answered Nov 25, 2011 at 12:00

erimerturk

4,28827 silver badges25 bronze badges

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

3 Comments

T.J. Crowder Over a year ago

Nice end-run, good to think outside the box like that. It could matter that he add the new stuff at the top rather than bottom of the style block (because of precedence), but if not, it simplifies things for him.

Red Over a year ago

Thank you erimerturk,This is a good solution[My logic have some breaks].

Red Over a year ago

@Crowder : I will never mind about Precedence [at least this time],anyway both are working well.

T.J. Crowder · Accepted Answer · 2011-11-25 11:54:32Z

1

Caveat: I do not recommend using regular expressions to work extensively with HTML.

But you might get away with it in this specific case:

str = str.replace(/<style[^>]*>/, function(m) {
    return m + mydata;
});

Live example

answered Nov 25, 2011 at 11:54

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

3 Comments

Red Over a year ago

Hai,Is there any other way ? I am making a WYSWYG editor.So i dont want to convert this to DOM,just want to save on DB.

T.J. Crowder Over a year ago

@DileepDil: My answer doesn't convert anything to DOM. It does a string replacement on text in a variable.

Red Over a year ago

@Crowder i mean the First line of your Answer.

Community · Accepted Answer · 2017-05-23 10:08:12Z

1

Kindly refer this. A Brilliant post from sometime ago on the use of Regex with HTML.

Two of the most diverse technologies used together.

[See here] RegEx match open tags except XHTML self-contained tags

edited May 23, 2017 at 10:08

CommunityBot

11 silver badge

answered Nov 25, 2011 at 11:59

Arindam

9981 gold badge8 silver badges22 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:47:32Z

0

Something like this

var start = html.indexOf("<script", 0); //find the index of the first script
start = html.indexOf(">", start); //Starting for that script tag, find the next >

var output = [html.slice(0, start), myData, html.slice(start)].join(''); //Add string to at that position.

Thanks to jAndy for his code snippit

Hope this helps.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Nov 25, 2011 at 11:54

Ash Burlaczenko

25.6k16 gold badges70 silver badges103 bronze badges

Comments

Steve Wellens · Accepted Answer · 2017-11-28 14:13:13Z

0

You might want to look into the HTML Agility Pack (free library):

edited Nov 28, 2017 at 14:13

answered Nov 25, 2011 at 11:59

Steve Wellens

20.6k2 gold badges31 silver badges70 bronze badges

1 Comment

Red Over a year ago

A simple solution is always welcomed.Also No more DOM [This is different case,if i am doing this on a web page then its welcomed]

Collectives™ on Stack Overflow

javascript regex replace html

5 Answers 5

3 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related