Use Regex to Code an Inline TOC, from an External TOC's .ncx File

[mostlynovels]

If, for whatever reason, you would like to include an inline TOC in an EPUB, and if the EPUB already has an acceptable external TOC, then you can easily generate most of the html code by using the .ncx file.

I was inspired to find out if this could be done using regex+replace, after reading how to do it with the perl script shared by St_Albert in Post #3 of https://www.mobileread.com/forums/sho...d.php?t=121607 .

The below regex+replace seems to successfully produce html code of <ul><li> for an inline TOC. Multilevels seem to be indented appropriately. If you prefer another element instead of <li> , e.g. <p> , see the note at the end of this post.

If you come up with improvements, please post!


*************************************

1. Make a copy of the .ncx file

2. Use these 3 sets of regex+replace on the copy of the .ncx file, in sequence (adjust for your flavor of regex).

 #1 search     <navPoint[\w\W]*?>
     replace    <ul class="contents_inline">
 #2 search     </navpoint>
     replace    </ul>
 #3 search     <navLabel>\s*?<text>([\w\W]*?)</text>\s*?</navLabel>\s*?<content src="([\w\W]*?)"/>
     replace    <a href="$2"><li class="contents_inline">$1</li></a>

3. Copy out the relevant html code between the first <ul class="contents_inline"> , and the last </ul> ,and then sandwich it in something like:

 <div class="contents_inline">
   <h2 class="contents_inline">Table of Contents</h2>
   COPIED HTML CODE
 </div>

4. To NOT display <ul> with bullets, add to the CSS file:

 ul.contents_inline {
 list-style-type:none !important;
 }

5. The TOC can be further styled in the CSS file as desired, with selectors based on the class contents_inline .

*************************************

NOTE: In the html if you prefer another element, e.g. <p> , instead of <li> , just substitute p in the regex+replace for li and delete the ul tags (i.e. replace with nothing). However then any multilevels won't be automatically indented. To maintain indentation maybe could alternatively substitute in the regex+replace div for ul , and then indent the divs via CSS.

[st_albert]

That's pretty slick. I like how it automatically preserves the nested TOC structure (if any) by making nested <ul>'s.

[DMSmillie]

Nice! Thanks for sharing this, mostlynovels.