[Bug report] Undecorated external links

[bttrx]

Operating system

Linux Mint 22 MATE

Publii version

0.46.2 (build 16966)

Issue type

Free plugin

Bug description

<a title="Title" href="https://www.example.com">Example.com</a> will not be decorated by the External Links Plugin. Swapping title and href attributes will make the decoration work.

The problem is the regex in this line in main.js:

const externalLinkRegex = new RegExp(`<a href="(http[s]?):\/\/([^"]*)"(.*?)>(.*?)<\/a>`, 'g');

The regex works fine for links generated by the WYSIWYG editor, because it uses 'a href title...' order, but expect users to use direct HTML mode. (I didn't test the block or Markdown editor.)

<a(?:\s+?.*?)+?href="(http[s]?):\/\/([^"]*)"(.*?)>(.*?)<\/a> works better for me on https://regex101.com/, but I failed to make it work with Publii. I don't know Node.js.

Steps to reproduce

No response

Relevant log output

No response

[bobmitro]

@bttrx
Thanks for the suggestion and the improved regex! I made a slight adjustment by adding the i flag for case-insensitive matching on the <a> tag.
The new version 2.3.0 of the External Links Plugin is ready to download.

[bttrx]

Thanks Bob, but I made a mistake yesterday: I created a non-capturing group! Now version 2.3.0 drops any attributes between <a and href. Example: Writing <a title="Publii" href="https://getpublii.com/">Publii</a> drops the title.

I played with regex again and came up with this one: <a(\s+?.*?)href(?:\s)*?=(?:\s)*?"(http[s]?):\/\/([^"]*)"([^>]*)>([^<]*)<\/a>

It even works for this HTML mess:

1. <a href ="https://getpublii.com/   ">Publii</a>

2. <a href 

 =   


"https://getpublii.com/"   title 

= "Publii"    

rel="noopener"


>

Publii


</a>

3. <a  

title   =  "Publii" href="https://getpublii.com/">Publii</a>

4. <a title="Publii" href="https://getpublii.com/">Publii


is


great

</a>

Please find the diff file for main.js attached.

--- main.js.bak	2024-12-24 22:33:14.564427000 +0100
+++ main.js	2024-12-25 00:44:27.507019268 +0100
@@ -27,18 +27,18 @@ class ExternalLinksPlugin {
 		}
 	}
 
 	modifyExternalLinks(rendererInstance, text) {
 		const baseUrl = rendererInstance.siteConfig.domain;
-		const externalLinkRegex = /<a(?:\s+?.*?)+?href="(http[s]?):\/\/([^"]*)"(.*?)>(.*?)<\/a>/gi;		
+		const externalLinkRegex = /<a(\s+?.*?)href(?:\s)*?=(?:\s)*?"(http[s]?):\/\/([^"]*)"([^>]*)>([^<]*)<\/a>/gi;		
 		const iconClass = this.config.iconChoice !== 'no-icon' ? this.config.iconChoice : '';
 		const newClass = this.config.additionalClass ? ` ${this.config.additionalClass}` : '';
 		const linkTitle = this.config.linkTitle;
 		const overrideRel = this.config.overrideRel;
 		const excludeSelectors = this.config.excludeSelectors ? this.config.excludeSelectors.split('\n').map(sel => sel.trim()).filter(Boolean) : [];
 
-		return text.replace(externalLinkRegex, (match, protocol, link, attributes, innerHtml) => {
+		return text.replace(externalLinkRegex, (match, attributes, protocol, link, moreAttributes, innerHtml) => {
 			 try {
 				  const linkHostname = new URL(`${protocol}://${link}`).hostname;
 				  const baseHostname = new URL(baseUrl).hostname;
 
 				  if (linkHostname === baseHostname) {
@@ -47,10 +47,12 @@ class ExternalLinksPlugin {
 			 } catch (error) {
 				  console.error('Invalid URL:', error);
 				  return match;
 			 }
 
+			 attributes += moreAttributes;
+
 			 // Check for excluded selectors
 			 for (const selector of excludeSelectors) {
 				  const attributeRegex = new RegExp(`(class|id)="([^"]*\\b${selector}\\b[^"]*)"`);
 				  if (attributeRegex.test(attributes)) {
 						return match;