0

Alright, so I've been looking around for quite a while trying to figure out how to get this to work out. So what I'm trying to do is replace anything in strings that looks like this:

foo: bar;

But only if its not inside something like this:

<div style='foo: bar; ofoo: obar'>

So the basic idea is that I want to replace css when its not inside html style attributes. I understand that you can use a for loop and check it but I would like to do this with just the regex replace.

I'm using JavaScript Regex heres what my code attempt currently looks like:

\b(.*?):(|\s)(.*?);

https://regex101.com/r/LWohvu/1

Notes: I understand that you could use a ^ to check if it starts with it but that only works for the first line.

If I didn't cover any needed any information please feel free to comment!

DrBrad
  • 305
  • 2
  • 13
  • 1
    [Don't use regex to parse HTML](http://stackoverflow.com/a/1732454/5459839) even it concerns getting CSS out of it. – trincot Apr 06 '17 at 14:28
  • 1
    Are the preset requirements for the html element styles in the first place? It would be far easier to add and remove classes. Is it custom user styling or something like that being added at runtime? If that's the case you could add those custom styles to classes in a ` – Austin Winstanley Apr 06 '17 at 14:29
  • [`m` modifier](https://www.w3schools.com/jsref/jsref_regexp_m.asp) makes `^` work for every line. – logi-kal Apr 06 '17 at 14:30
  • Exactly what do you mean by that @AustinWinstanley Because I plan to color css as its typed in a contenteditable. – DrBrad Apr 06 '17 at 14:33
  • @horcrux I can do that however there is an issue with that, css allows users to have 1 line code for multiple attributes. – DrBrad Apr 06 '17 at 14:34
  • @trincot it is completely possible to highlight syntax with regex, I have done so before. It works without any issues. https://pastebin.com/Da14Wggd – DrBrad Apr 06 '17 at 14:40
  • So is the purpose to have a default style and then change the element style as the user types it into a textbox? What's unclear is where the original style is coming from and why you don't want to replace it? If it's the default style, you can move it into a class and use JS to add the style attribute to the element which will override the class. – Austin Winstanley Apr 06 '17 at 14:46
  • 1
    Also, @trincot is right. While you 'can' parse HTML using regex, there are a lot of reasons not to. The link posted to the previous SO answer is one of the most popular SO answers of all time for a reason, and it isn't just because it's funny. – Austin Winstanley Apr 06 '17 at 14:49
  • In a way I'm kind of doing that but a little differently. I have the styles as you are saying, but instead of using a textarea im using a contenteditable div then using regex to replace the text and put it back into the div. So ether way you do this you have to use regex or a for loop. – DrBrad Apr 06 '17 at 14:51
  • @AustinWinstanley for my purposes regex seems to be the best way for me to go at this point, If there is a way to replace css separately from html style attributes. – DrBrad Apr 06 '17 at 14:55
  • Ok, 3 things: 1. You don't have to use regex. 2. Why are you using a content editable div? You can style a textbox however you want and woudn't be able to tell any difference. And 3. I still don't understand the replacing part of what you're asking. Is there initial style? Or you just want to set the style of the element as they type? – Austin Winstanley Apr 06 '17 at 14:57
  • You are right I dont have to use regex, but regex is faster than any other methods I have come across. Im using a div contenteditable with every line being a separate contenteditable div to speed things up + div contenteditable allows styling with colors. The reason I am doing replacing is because I want to change text colors as the user types. I already have the html part down, I'm just needing help on the css portion. – DrBrad Apr 06 '17 at 15:02
  • 1
    Well, I still don't understand why you don't want to change the style that's already there with the full length aggregated from the divs, but you could just add to it with JS doing something like `theStyledElement.style.cssText = (theStyledElement.style.cssText + theStyleDiv.innerHTML);` Edit: In this case I'm assuming the innerHTML will just be the text the user types in. – Austin Winstanley Apr 06 '17 at 15:10
  • I'm not really trying to create a stylesheet. I'm trying to change syntax colors as the user types. Here's an example, https://cwiz.co Im trying to get the css portion of the code to color as the user types. So if the user types foo: bar; it will be foo</span>: bar; – DrBrad Apr 06 '17 at 15:18

1 Answers1

2

According to your description, you want to replace all style in your html page except those are inside of a html tag. I've updated your regex and this worked according to your need. Please check this.

Regex:

^(?!(\=|\<))(.*?):(.*?);

Regex in JavaScript:

/^(?!(\=|\<))(.*?):(.*?);/gm

All style start with style= if this exists inside of a html tag. So, I've tried to avoid those using ^(?!(\=|\<)). This represent not start with = and <. Avoid = for style and < for html tag.

Please check this in Updated Regex.

csharpbd
  • 3,786
  • 4
  • 23
  • 32