Welcome to WebmasterWorld Guest from 3.231.226.211

Forum Moderators: phranque

Message Too Old, No Replies

Finding Nested Element Closing Tags With regex

     
2:58 am on Jul 30, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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?
3:19 am on July 30, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 363


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.
5:09 am on July 30, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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?
5:52 am on July 30, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 363


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.

7:39 am on July 30, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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...
12:58 am on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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
2:21 am on July 31, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15934
votes: 887


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!
2:46 am on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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...