I'm working on a .net core taghelper that will turn simple markup into the markup I need for my mobile and desktop menus and I need some help/refresher on what the best way to accomplish the string manipulation would be as I'm unfortunately rusty at the moment. The starting markup example is below.
<topnav>
<a asp-controller="Home" asp-action="Index">Home</a>
<a asp-controller="Home" asp-action="Test1">Test1</a>
<a asp-controller="Home" asp-action="Test2">Test2</a>
<div>
<span>Nested Section</span>
<a asp-controller="Home" asp-action="Test3">Test3</a>
<a asp-controller="Home" asp-action="Test4">Test4</a>
</div>
</topnav>
I would like to duplicate this structure while identifying...
<span>Nested Section</span>
and...
<a asp-controller="Home" asp-action="Test3">Test3</a>
<a asp-controller="Home" asp-action="Test4">Test4</a>
which would be inserted into two different templates to create...
<a asp-controller="Home" asp-action="Index">Home</a>
<a asp-controller="Home" asp-action="Test1">Test1</a>
<a asp-controller="Home" asp-action="Test2">Test2</a>
<div class='accordion'>
<div class='title'>
<span>Nested Section</span>
<i class='icon'></i>
</div>
<div class='content'>
<a asp-controller="Home" asp-action="Test3">Test3</a>
<a asp-controller="Home" asp-action="Test4">Test4</a>
</div>
</div>
and...
<a asp-controller="Home" asp-action="Index">Home</a>
<a asp-controller="Home" asp-action="Test1">Test1</a>
<a asp-controller="Home" asp-action="Test2">Test2</a>
<div class='dropdown'>
<span>Nested Section</span>
<i class='icon'></i>
<div class='menu'>
<a asp-controller="Home" asp-action="Test3">Test3</a>
<a asp-controller="Home" asp-action="Test4">Test4</a>
</div>
</div>
which would then be inserted into a third template to create...
<nav class='sidebar menu'>
<a asp-controller="Home" asp-action="Index">Home</a>
<a asp-controller="Home" asp-action="Test1">Test1</a>
<a asp-controller="Home" asp-action="Test2">Test2</a>
<div class='accordion'>
<div class='title'>
<span>Nested Section</span>
<i class='icon'></i>
</div>
<div class='content'>
<a asp-controller="Home" asp-action="Test3">Test3</a>
<a asp-controller="Home" asp-action="Test4">Test4</a>
</div>
</div>
</nav>
<section class='top menu'>
<nav class='computer'>
<a href="#"><img alt="logo"/></a>
<a asp-controller="Home" asp-action="Index">Home</a>
<a asp-controller="Home" asp-action="Test1">Test1</a>
<a asp-controller="Home" asp-action="Test2">Test2</a>
<div class='dropdown'>
<span>Nested Section</span>
<i class='icon'></i>
<div class='menu'>
<a asp-controller="Home" asp-action="Test3">Test3</a>
<a asp-controller="Home" asp-action="Test4">Test4</a>
</div>
</div>
</nav>
<div class='mobile'>
<a href="#"><img alt="logo"/></a>
<a href='#'><i class='sidebar icon'></i></a>
</div>
</section>
I already have the templates built and just need to complete the string parsing from the original topnav tag's content and insert it appropriately. I would also like the solution to work with menus that require more than one nesting such as...
<topnav>
<a asp-controller="Home" asp-action="Index">Home</a>
<a asp-controller="Home" asp-action="Test1">Test1</a>
<a asp-controller="Home" asp-action="Test2">Test2</a>
<div>
<span>Nested Section</span>
<a asp-controller="Home" asp-action="Test3">Test3</a>
<div>
<span>Nested Section 2</span>
<a asp-controller="Home" asp-action="Test5">Test5</a>
<a asp-controller="Home" asp-action="Test6">Test6</a>
</div>
<a asp-controller="Home" asp-action="Test4">Test4</a>
</div>
</topnav>
I assume regex is the way to go, but I wanted to gather some opinions before going in the wrong direction. It is also possible to add to the original markup if needed, but I require it to be as minimal as possible. Please provide examples!
Thanks!