Invalid characters on generated HTML
I have run an HTML validator on some pages: https://validator.w3.org/nu/?doc=http%3A%2F%2Fkangax.github.io%2Fcompat-table%2Fesnext%2F
There are a lot of problems with invalid characters ([, ], #, %), which seem serious to me:
- Bad value for attribute href on element a: Illegal character in fragment: # is not allowed;
<td><span><a class="anchor" href="#test-SIMD_(Single_Instruction,_Multiple_Data)_a_href=_https://tc39.github.i…on_img_src=_../mdn.png_alt=_MDN_(Mozilla_Development_Network)_logo_width=_15_height=_13_/_/a_nbsp;">§ - Bad value for attribute href on element a: Percentage ("%") is not followed by two hexadecimal digits;
<td><span><a class="anchor" href="#test-SIMD_(Single_Instruction,_Multiple_Data)_SIMD.%type%.store1_a_href=_ht…on_img_src=_../mdn.png_alt=_MDN_(Mozilla_Development_Network)_logo_width=_15_height=_13_/_/a_nbsp;">§ - Bad value #test-Observable_Observable.prototype[Symbol.observable] for attribute href on element a: Illegal character in fragment: [ is not allowed;
<td><span><a class="anchor" href="#test-Observable_Observable.prototype[Symbol.observable]">§
The fisrt one seems to be just wrong, is it fixed later via js? The other two seem to need escaping.
These may be preventing the pages to work on older browsers (see #1127).
I believe the strigs above are escaped by the escapeTestName() function in build.js:
function escapeTestName(name) {
return name.replace(/^[\s<>&"',]+|[\s<>&"',]+$/g, '').replace(/[\s<>&"]+/g, '_');
}
I tried adding further filtering for '%', '[', ']':
.replace(/%/g, '&%').replace(/\[/g, '&[').replace(/\]/g, '&]')
But these & are further escaped to & somewhere else, so it doesn't work.
The '#' seems to be explicitly added by this line in build.js:
append('<span><a class="anchor" href="#' + getHtmlId(id) + '">§</a>' + name + footnoteHTML(t) + '</span></td>')
But I am not sure why it is illegal.