Inserting sequential alphanumeric ID's in DB display (with regex, DOM, etc.)

[Chavista]

Consider the following code stored in a database table:

<section id="directions">
  <h2>Directions</h2>
  <div><p>Some text.</p></div>
</section>

<section id="ecology">
  <h2>Ecology</h2>
  <div><p>Some text.</p></div>
</section>

A user can’t toggle a section open or closed unless section > data-target and div id have matching values. My REAL code is a lot more complex, and I’m trying to keep it simple. My goal is to use regex, DOM parser or something to insert the missing values.

I discovered that there are several problems with modifying the section ID or header title to serve as the “secondary ID” (data-target and div ID). So I’d like to know if there’s a way to make the values simple lower case letters, preferably sequential, like this:

<section data-target="#a">
  <h2></h2>
  <div id="a">

<section data-target="#b">
  <h2></h2>
  <div id="b">

So if an article has six sections, the secondary ID’s would be a, b, c, d, e and f.

Now let me show you the big picture. Going back to the beginning, the articles stored in my database will include this code…

<section id="directions">
  <h2>Directions</h2>
  <div>

It’s very generic, except that each section will have a unique ID and each header will obviously be different. However, I want the display to look like this:

<section id="horses" data-toggle="collapse" data-target="#a" class="SecCon">
  <h2><span class="label label-primary"><small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small> Horses</span></h2>
  <div id="a" class="collapse in article">
    <p>Some text.</p>
  </div>
</section>

I couldn’t figure out how do do it with regex, then I learned about DOM parsers, but that got confusing really fast. (Just choosing between DOM software programs is confusing.) Then I realized I could accomplish everything with a simple series of str_replace - except for the sequential secondary ID’s.

So does anyone know how to do give each section and div a matching ID that’s unique from all other sections? Regex would probably be preferable, so I don’t have to install any DOM Parser software on my websites.

Thanks!

[Drummin]

It’s pretty simple to build an alpha array then using the article number, get the letter value from the array. Here’s a quick sample.

<?php
//Number of articles from count
$num_art = 36;
// Build alpha array 
$lower_alpha = array();
$letter = 'a';
for($l=1;$l<=$num_art;$l++) {
    $lower_alpha[$l] = $letter++;
}
//Set first article number before display loop
$article_num = 1;
// Your WHILE loop goes here{
// I will use a FOR loop for the test sample
for($l=1;$l<=$num_art;$l++) {
    
    $target = $lower_alpha[$article_num];
?>
   <section data-target="#<?php echo $target;?>">
        <h2></h2>
        <div id="<?php echo $target;?>" class="collapse in article">
            <p>Some text.</p>
        </div>
    </section>
    <?php
    //Increment $article_num
    $article_num++;
    //Close WHILE }
}
?>

Output of sample goes past z with aa etc.

	<section data-target="#a">
		<h2></h2>
		<div id="a" class="collapse in article">
			<p>Some text.</p>
		</div>
	</section>
		<section data-target="#b">
		<h2></h2>
		<div id="b" class="collapse in article">
			<p>Some text.</p>
		</div>
	</section>
		<section data-target="#c">
		<h2></h2>
		<div id="c" class="collapse in article">
			<p>Some text.</p>
		</div>
	</section>
		<section data-target="#d">
		<h2></h2>
		<div id="d" class="collapse in article">
			<p>Some text.</p>
		</div>
	</section>
...
etc
...
		<section data-target="#z">
		<h2></h2>
		<div id="z" class="collapse in article">
			<p>Some text.</p>
		</div>
	</section>
		<section data-target="#aa">
		<h2></h2>
		<div id="aa" class="collapse in article">
			<p>Some text.</p>
		</div>
	</section>
		<section data-target="#ab">
		<h2></h2>
		<div id="ab" class="collapse in article">
			<p>Some text.</p>
		</div>
	</section>

[Chavista]

Got it; thanks!