Finding Nested Element Closing Tags With regex

[csdude55]

I've been working on a way to find the correct ending tag for an inline element, and I'm curious about your feedback.

I was originally using something like:

<big-0 class="foo">bar</big-0>

where 0 is actually a random generated number using Math.random().toString(36), and I replace <big-[0-9]+ ...> with <span ...> at the end of the script. But there's a chance that the <big-[0-9]+ ...> would actually be submitted (and it's my understanding that IE would choke on this), so I would rather use a real HTML element.

Now I'm leaning towards

<span data-marker="0" class="foo">bar</span data-marker="0">

I know that having the data-XXXX in the ending tag wouldn't really validate, but I don't think any browser would choke on it, either.

In the end, what I'm doing is searching to see if there are two conflicting tags surrounding the same text, and if so then I'm deleting the outermost tag. But to do this I need to match the right ending tag. So, for example, this:

<span data-marker="0" class="rel-large"><b><font face="arial"><span data-marker="1" class="rel-medium-default"><u>Yeah, it's <i>me</i>!</u></span data-marker="1"></font></b></span data-marker="0"><br>

becomes:

<b><font face="arial"><span data-marker="1" class="rel-medium-default"><u>Yeah, it's <i>me</i>!</u></span data-marker="1"></font></b><br>

Can you guys suggest any other way that I could find the correct ending tag that would actually validate if it goes through?

[not2easy]

Is this supposed to be html5? I'm trying to understand the use of <font> tags. The correct closing tag for <span is just </span> so it looks like I'm not "getting" the question. Do you use some kind of text editor for this that can't match tags so that you are manually trying to match them up? Sorry, I seem dense this evening.

[csdude55]

I was hoping it made sense, the entire explanation becomes complicated...

I'm working with a contenteditable, and the user can enter text and then change the font size on the fly. When they do, I surround the text with an inline element with a class, so that the font size is a percentage:

.rel-small { font-size: 80% }
.rel-medium-default { font-size: 100% }
.rel-large { font-size: 140% }
.rel-extra-large { font-size: 180% }
.rel-huge { font-size: 220% }

So say they enter "Headline", and then change the font size to "small". The first time, it shows up as:

<span class="rel-small">Headline</span>

...which is great. Then they decide to make it bold:

<span class="rel-small"><b>Headline</b></span>

But then they decide that it's too small, so they change the font size to "large". Now, it shows up as:

<span class="rel-small"><b><span class="rel-large">Headline</span></b></span>

... not so great, because now "large" is relative to "small" instead of the parent container. So now they change it to "Extra Large":

<span class="rel-small"><b><span class="rel-large"><span class="rel-xl">Headline</span></span></b></span>

Then they continue on with the article, and make the text small again:

<span class="rel-small"><b><span class="rel-large"><span class="rel-xl">Headline</span></span></b></span><br><br><span class="rel-small">This is the article</span>

Or worse, they start the article while within the "Headline" text and change the fonts afterward, so it becomes:

<span class="rel-small"><b><span class="rel-large"><span class="rel-xl">Headline<br><br><span class="rel-small">This is the article</span></span></span></b></span>

As you can see, it's become a mess. But now if I try to remove the outermost <span> with a regex, it's going to match the first </span> instead of the last one that should actually match. So a regex like:

/<span [^>]+>.*?<\/span>/gi

returns:

<b><span class="rel-large"><span class="rel-xl">Headline</span></b></span><br>This is the article

which, of course, isn't quite right because the placement of <b> doesn't match up and it removes the <span> around the article. Or without the ?:

/<span [^>]+>.*<\/span>/gi

returns:

<b><span class="rel-large"><span class="rel-xl">Headline</span></span></b></span><br><span class="rel-small">This is the article

So. What I'm trying to do instead is set a marker for each <span> tag, so that I can find and remove the matching </span> instead of the wrong one.

I originally started to use <big-0 class="rel-foo"> and </big-0>, which I know isn't valid but I was planning to change each <big-[0-9]+> to a <span> after they submit. But then I changed it to using the data-marker attribute as a counter, which is valid in the opening tag, but I don't think it validates on the closing tag.

So my question here is, is there a better way to find the right ending tag?

[not2easy]

OIC. Yes, that makes complete sense, now. Rather than using defined percentage as in

.rel-small { font-size: 80% } 

can't you use the x-small, small, medium, large, x-large font sizes that are relative to the basic font size of the page? Or because it is in a contenteditable it can't use those?

If you could use those it might prevent some of the resizing retries. Rather than

.rel-small { font-size: 80% }

for example, you could use <span class="small"> with

.small {font-size: small }

so that their next choice would not be relative to their last choice - and hopefully use less nesting.

[csdude55]

can't you use the x-small, small, medium, large, x-large font sizes that are relative to the basic font size of the page?

Possibly... I've had a feature on my site for about 5 years, though, that let's the user increase or decrease the font size of the page, and everything within <section> that's wrapped in <p></p> is affected.

The default font size is 12px, but they can click to increase it by 1px per click, and then a cookie is set to remember their preferred setting.

After a post is submitted, it's shown within a <p> element, so the text the author changes will be relative to the setting made by the end user. So in the end it the post would (err, should) look like:

# CSS
p { font-size: 12px }
.rel-small { font-size: 80% }
.rel-xl { font-size: 180% }

# HTML
<p>
 <b><span class="rel-xl">Headline</span></b><br><br><span class="rel-small">This is the article</span>
</p>

Or because it is in a contenteditable it can't use those?

Wellllll, I just made a discovery. In Chrome, at least, the contenteditable seems to auto-fix the code to some degree, so it removes the attribute from the ending tag by default.

I can still use <big-0 ...></big-0>, though, which even validates! It works fine on my Chrome and on my Android phone, but it's not compatible at all with older browsers (or IE at all) so I'm not sure if it will really be usable at all in this context:

[caniuse.com...]

I opened IE9 for the first time in forever and apparently my entire Javascript file dies, so I'm gonna have to do some work on that before I can figure out whether <big-0> works in IE9...

[csdude55]

Good news, using <big-0> worked just fine on IE9 :-D I'm not sure why caniuse.com shows it as not being supported, but to all appearances it did what I wanted

[lucy24]

where's lucy24?

I'm right here, but the stuff happening on csdude's website is so hideously complicated, it transcends* regular expressions ;)


* My fingers chose to type “transcents” implying that the whole thing stinks--which was not at all my intention!

[csdude55]

And now you know why I've been working on this stupid rebuild for over a year now! lol

I'm about to post yet another negative lookbehind question... my brain is just fried, I need a dang vacation...