Title finder not working correctly

[bencroker]

The title finder, as well as the check for SVG tags, require tags that are closed immediately. Tags that have attributes are not being detected, the regexp and the indexOf functions need tweaking.

<!-- This works: -->
<title>New title</title>
<svg><title>Image title</title></svg>

<!-- This doesn't work: -->
<title id="">New title</title>
<svg id=""><title>Image title</title></svg>

<!-- This also doesn't work: -->
<svg><title>Image title</title></svg>
<title>New title</title>

htmx/src/htmx.js

Lines 708 to 718 in 0aa372d

	var TITLE_FINDER = /<title>([\s\S]+?)<\/title>/im;
	function findTitle(content) {
	if(content.indexOf('<title>') > -1 &&
	(content.indexOf('<svg>') == -1 ||
	content.indexOf('<title>') < content.indexOf('<svg>'))) {
	var result = TITLE_FINDER.exec(content);
	if (result) {
	return result[1];
	}
	}
	}

[bencroker]

@1cg any suggestions on approaches to fixing this? The current logic is overly simple and won’t work, but getting into regexp patterns can lead to complex code. Right now I don’t see any other way though.

[1cg]

I agree, and I don't think this would be too bad.

/<svg[^>]*>/

or something like that. Are you willing to take a crack at it?

[bencroker]

Well here's my crack at implementing your version with a regexp.

function findTitle(content) { 
    var contentWithSvgsRemoved = content.replace('/<svg[^>]*>[\s\S]*?<\/svg>/gim', '');
    var result = contentWithSvgsRemoved.match('/<title[^>]*>([\s\S]*?)<\/title>/im');

    if (result) { 
        return result[1]; 
    }
}

[1cg]

how's about this hack?

[bencroker]

Feels quite hacky, still looks for an exact match of <title> and still fails in this case:

<svg id=""><title>Image title</title></svg>
<title id="">New title</title>

I dislike the idea of matching against <title and <svg because it doesn't rule out <titlex> and <svgx> tags, then again neither does my regular expression :(

[bencroker]

Ok, so this version does rule out <titlex> and <svgx> tags :)

function findTitle(content) { 
    var contentWithSvgsRemoved = content.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, '');
    var result = contentWithSvgsRemoved.match(/<title(\s[^>]*>|>)([\s\S]*?)<\/title>/im);

    if (result) { 
        return result[2]; 
    }
}

[1cg]

Good points. I'm good w/ this, if you want to make the change.

[bencroker]

Yup, I'll write a test and implement, thanks for taking a look.

[bencroker]

Added tests in 21ec109 and implemented in a76f9f3.

@1cg Would you manually spin up a 1.5.1 test directory or do you have an automated process to do this?

[1cg]

Tests verified and I've created a 1.5.1 directory for testing. Shooting for a release this week.

Thank you @bencroker!