How can I replace id numbers, decreasing them, on HTML file

rx65m · Feb 03, 2021#12021-02-03T19:01+00:00

I hope to be posting this topic correctly as it is my first time asking for help, and I'm not an expert at all with Regex.

I have an HTML document showing 401 different <div>s that were captured chronologically during last month, so the oldest <div>s are at the bottom of the file, and the newest ones at the top of it.
We need to have these <div>s in the opposite order which means having the oldest ones at the top, and the newest ones at the bottom.
I will use CSS order Property to do this easily, but first I need to name each <div> id with a specific number different.
So I named all those ids as id="401" pretending to rename each one of them with Regex, to 1 lower number each time, hoping to get the last one named id="001"
Unfortunately, I can't find a working solution.

Right now, all my <div>s tags look like this:
<div id="401" class="capture">

Since all my ids are currently named the same, I can edit easily this same name if needed, to any thing you suggest me, in order to make the Regex process easier or correctly, for this purpose.
I bet you know a way to solve this.
Thanks a lot in advance,
Rex.

Mofi · Feb 04, 2021#22021-02-04T07:20+00:00

The HTML file must be modified already by using a script. So why are the DIV elements not reordered with the script which would make it unnecessary to assign a decrementing number as identifier to each DIV element and let the browser reorder them on display?

Do you know that an id name must begin with a letter ([A-Za-z]) according to HTML 4.01 specification. So id="401" is an invalid identifier and valid would be for example id="n401". In HTML 5 the id name is defined less restrictive and can consist of only digits. See also on Stack Overflow What are valid values for the id attribute in HTML?

It is no problem with an UltraEdit script to assign a decrementing number to each DIV element in an HTML 5 file, but it would be also no problem for an UltraEdit script to write the DIV elements itself in the wanted order into the HTML file. It is most likely more easily to code and faster done to reorder the DIV elements in the HTML file then assigning decrementing numbers as identifier names. But more information about the entire HTML file content is needed to code one of the two solutions. Best would be a real example of the entire HTML file with for example just three DIV elements before and after script execution. For example it could be important to know if a DIV element having currently the attribute id="401" could contain embedded another DIV element or if that can be excluded. It would be also useful for coding the script if all DIV elements to reorder or renumber are in one block in the HTML file or are there other elements between them.

rx65m · Feb 04, 2021#32021-02-04T15:27+00:00

You are totally right Mofi!
Thank you very much for your kind comments. I appreciate all the time and effort you dedicate to all questions.
Actually I solved this issue by simply wrapping all my <div>s withing a container with a CSS class: {flex-direction: column-reverse;}

However, if you don't mind me asking you again, I would love to learn how you do this with regex in UltraEdit.
I mean:
How can we edit with Regex in UltraEdit, a segment of text which is repeatedly used out of any column, by adding a consecutive decreasing number to each segment.

For instance, from some text like this:
"Lorem ipsum dolor sit amet <div id="a401" class="capture">, consectetur adipiscing elit, sed do eiusmod tempor incidi <div id="a401" class="capture"> dunt ut labore et dolore magna aliqua. Ut en <div id="a401" class="capture"> im ad minim veniam, quis nostrud exercitation ulla <div id="a401" class="capture"> mco laboris nisi ut aliquip ex ea commodo conse <div id="a401" class="capture"> quat. Duis aute irure dolor in reprehenderit in volup <div id="a401" class="capture"> tate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occa <div id="a401" class="capture"> ecat cupidatat non proident, sunt in culpa qui offi <div id="a401" class="capture"> cia deserunt mollit anim id est laborum."

To become something like this:
"Lorem ipsum dolor sit amet <div id="a400" class="capture">, consectetur adipiscing elit, sed do eiusmod tempor incidi <div id="a399" class="capture"> dunt ut labore et dolore magna aliqua. Ut en <div id="a398" class="capture"> im ad minim veniam, quis nostrud exercitation ulla <div id="a397" class="capture"> mco laboris nisi ut aliquip ex ea commodo conse <div id="a396" class="capture"> quat. Duis aute irure dolor in reprehenderit in volup <div id="a395" class="capture"> tate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occa <div id="a394" class="capture"> ecat cupidatat non proident, sunt in culpa qui offi <div id="a393" class="capture"> cia deserunt mollit anim id est laborum."

Thanks a lot in advance,
Rex.

Mofi · Feb 04, 2021#42021-02-04T18:37+00:00

The script code to renumber the DIV identifiers:

Code: Select all

if (UltraEdit.document.length > 0)  // Is any file opened?
{
   // Define environment for this script.
   UltraEdit.insertMode();
   if (typeof(UltraEdit.columnModeOff) == "function") UltraEdit.columnModeOff();
   else if (typeof(UltraEdit.activeDocument.columnModeOff) == "function") UltraEdit.activeDocument.columnModeOff();

   // Move caret to top of the active file.
   UltraEdit.activeDocument.top();

   // Define the parameters for a case-sensitive Perl regular expression
   // find in current file from top of the file to end of the file.
   UltraEdit.perlReOn();
   UltraEdit.activeDocument.findReplace.mode=0;
   UltraEdit.activeDocument.findReplace.matchCase=true;
   UltraEdit.activeDocument.findReplace.matchWord=false;
   UltraEdit.activeDocument.findReplace.regExp=true;
   UltraEdit.activeDocument.findReplace.searchDown=true;
   if (typeof(UltraEdit.activeDocument.findReplace.searchInColumn) == "boolean") {
      UltraEdit.activeDocument.findReplace.searchInColumn=false;
   }

   // Define the first number decrement by one on each found occurrence.
   var nNumber = 401;

   // Search in a loop with the Perl regular expression <div[\t ]+id=(["'])a\K\d+(?=\1)
   // for starting DIV tags with first attribute being the attribute id with
   // name starting with character a and having next one or more digits and
   // no other characters up to end of the name. Matched is only the number.
   while (UltraEdit.activeDocument.findReplace.find("<div[\\t ]+id=([\"'])a\\K\\d+(?=\\1)"))
   {
      // Decrement the number.
      nNumber--;
      // Overwrite the matched (selected) number with the current
      // number converted to a string using decimal system.
      UltraEdit.activeDocument.write(nNumber.toString(10));
   }
}

The script was tested on the input data (missing </div> tags added):

Code: Select all

"Lorem ipsum dolor sit amet <div id="a401" class="capture">, consectetur adipiscing elit, sed do eiusmod tempor incidi </div><div id="a401" class="capture"> dunt ut labore et dolore magna aliqua. Ut en </div><div id="a401" class="capture"> im ad minim veniam, quis nostrud exercitation ulla </div><div id="a401" class="capture"> mco laboris nisi ut aliquip ex ea commodo conse </div><div id="a401" class="capture"> quat. Duis aute irure dolor in reprehenderit in volup </div><div id="a401" class="capture"> tate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occa </div><div id="a401" class="capture"> ecat cupidatat non proident, sunt in culpa qui offi </div><div id="a401" class="capture"> cia deserunt mollit anim id est laborum.</div>

The output result with the script above is:

Code: Select all

"Lorem ipsum dolor sit amet <div id="a400" class="capture">, consectetur adipiscing elit, sed do eiusmod tempor incidi </div><div id="a399" class="capture"> dunt ut labore et dolore magna aliqua. Ut en </div><div id="a398" class="capture"> im ad minim veniam, quis nostrud exercitation ulla </div><div id="a397" class="capture"> mco laboris nisi ut aliquip ex ea commodo conse </div><div id="a396" class="capture"> quat. Duis aute irure dolor in reprehenderit in volup </div><div id="a395" class="capture"> tate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occa </div><div id="a394" class="capture"> ecat cupidatat non proident, sunt in culpa qui offi </div><div id="a393" class="capture"> cia deserunt mollit anim id est laborum.</div>"

Here is one more script which reverses the DIV elements in the file containing the input data as posted above.

Code: Select all

if (UltraEdit.document.length > 0)  // Is any file opened?
{
   // Define environment for this script.
   UltraEdit.insertMode();
   if (typeof(UltraEdit.columnModeOff) == "function") UltraEdit.columnModeOff();
   else if (typeof(UltraEdit.activeDocument.columnModeOff) == "function") UltraEdit.activeDocument.columnModeOff();

   // Move caret to top of the active file.
   UltraEdit.activeDocument.top();

   // Define the parameters for a just once executed case-sensitive
   // Perl regular expression find in current file from top of the file.
   UltraEdit.perlReOn();
   UltraEdit.activeDocument.findReplace.mode=0;
   UltraEdit.activeDocument.findReplace.matchCase=true;
   UltraEdit.activeDocument.findReplace.matchWord=false;
   UltraEdit.activeDocument.findReplace.regExp=true;
   UltraEdit.activeDocument.findReplace.searchDown=true;
   if (typeof(UltraEdit.activeDocument.findReplace.searchInColumn) == "boolean") {
      UltraEdit.activeDocument.findReplace.searchInColumn=false;
   }

   // Search with the Perl regular expression (?:<div[\\t ]+id=([\"'])a\\d+(?=\\1)[\\s\\S]+?</div>\\s*)+
   // for one or more DIV elements with first attribute being the attribute id
   // with name starting with character a and having next one or more digits
   // and no other characters up to end of the name. There can be whitespaces
   // between the DIV elements. But the DIV elements to reorder must be in
   // one block not being too large to select them with a Perl regex find.
   if (UltraEdit.activeDocument.findReplace.find("(?:<div[\\t ]+id=([\"'])a\\d+(?=\\1)[\\s\\S]+?</div>\\s*)+"))
   {
      // Get the selected DIV elements as an array of strings.
      var asElements = UltraEdit.activeDocument.selection.split("</div>");
      // Remove the last string which is always an empty string.
      asElements.pop();
      // Reverse the elements in the array.
      asElements.reverse();
      // Append an empty string to the array.
      asElements.push("");
      // Join the string of the array together and overwrite the
      // selected block of DIV elements with the reversed elements.
      UltraEdit.activeDocument.write(asElements.join("</div>"));
   }
}

The output of this little script is:

Code: Select all

"Lorem ipsum dolor sit amet <div id="a401" class="capture"> cia deserunt mollit anim id est laborum.</div><div id="a401" class="capture"> ecat cupidatat non proident, sunt in culpa qui offi </div><div id="a401" class="capture"> tate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occa </div><div id="a401" class="capture"> quat. Duis aute irure dolor in reprehenderit in volup </div><div id="a401" class="capture"> mco laboris nisi ut aliquip ex ea commodo conse </div><div id="a401" class="capture"> im ad minim veniam, quis nostrud exercitation ulla </div><div id="a401" class="capture"> dunt ut labore et dolore magna aliqua. Ut en </div><div id="a401" class="capture">, consectetur adipiscing elit, sed do eiusmod tempor incidi </div>"

The id attributes are not removed, but that could be easily done with a replace before splitting up the selected blocks into DIV elements. It would be of course also possible to output the reversed elements in a better format like inserting indenting spaces/tabs and line breaks.

rx65m · Feb 08, 2021#52021-02-08T16:58+00:00

Thank you very much again, Mofi!
As always, your help is fantastic!