Dueling Regex and DOM Scripts - php

Question

I'm learning how to work with Bootstrap and jQuery. It looks like I need to do something like this with my articles in order to get some of the special effects (like toggling sections open and closed)...
<section id="introduction">
<h2 class="h2Article" id="a1" data-toggle="collapse" data-target="#b1"><span class="Article"><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> Introduction</span></span></h2>
<div class="divArticle collapse in article" id="b1">
But I have hundreds of articles to put into my database, and writing all that code would take forever. So I put this in my database instead...
<section id="introduction">
<h2 class="h2Article">Introduction</h2>
<div class="divArticle">
Next, I want to use regex or DOM to insert the missing values (preferably regex, as it's easier to work with). In fact, it was working, but now it isn't.
This is my regex script:
$Content = preg_replace('/<h2 class="h2Article">(.*?)<\/h2>/', '<h2 class="h2Article"><span class="Article"><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> $1</span></h2>', $Content);
$Content = preg_replace('/<h3 class="h3Article" id="(.*?)">(.*?) <\/h3>/', '<h3 id="$1" class="Article"><span class="label label- default">$2</span></h3>', $Content);
$Content = preg_replace('/<div class="divArticle">(.*?)<\/div>/', '<div class="divArticle">$1<div style="margin-bottom: 10px; font-size: 150%; text-align: center;"><span class="only-expanded glyphicon glyphicon-remove- sign"></span></div></div>', $Content);
$Content = str_replace('<!-- EndMainDiv -->', '<div class="divClose" style="margin-bottom: 10px; font-size: 150%; text-align: center;"><span class="only-expanded glyphicon glyphicon-remove-sign"></span></div><!-- EndMainDiv -->', $Content);
And this is what the resulting HTML looks like:
<section id="introduction">
<h2 class="h2Article"><span class="Article"><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> Introduction</span></h2>
<div class="divArticle">
This is my DOM script:
$i = 1; // initialize counter
// initialize DOMDocument
$dom = new DOMDocument;
#$dom->loadHTML($Content); // load the markup
$sections = $dom->getElementsByTagName('section'); // get all section tags
if($sections->length > 0) { // if there are indeed section tags inside
// work on each section
foreach($sections as $section) { // for each section tag
// $section->setAttribute('id', '#a' . $i); // set id for section tag
// get div inside each section
foreach($section->getElementsByTagName('h2') as $h2) {
if($h2->getAttribute('class') == 'h2Article') { // if this div has class maindiv
$h2->setAttribute('id', 'a' . $i); // set id for div tag
$h2->setAttribute('data-target', '#b' . $i);
// $h2->setAttribute('data-target', '#b' . $i . ',#c' . $i);
}
}
foreach($section->getElementsByTagName('div') as $div) {
if($div->getAttribute('class') == 'divArticle') { // if this div has class divArticle
$div->setAttribute('id', 'b' . $i); // set id for div tag
}
if($div->getAttribute('class') == 'divClose') { // if this div has class maindiv
$div->setAttribute('data-target', '#b' . $i); // set id for div tag
}
}
$i++; // increment counter
}
}
// back to string again, get all contents inside body
$Content = '';
foreach($dom->getElementsByTagName('body')->item(0)->childNodes as $child) {
$Content .= $dom->saveHTML($child); // convert to string and append to the container
}
$Content = str_replace('data-target', 'data-toggle="collapse" data-target', $Content);
// $Content = str_replace('data-target', 'class="SecCon" data- toggle="collapse" data-target', $Content);
$Content = str_replace('<div class="divArticle', '<div class="divArticle collapse in article', $Content);
And this is what the HTML looks like:
<section id="introduction">
<h2 class="h2Article" id="a1" data-toggle="collapse" data- target="#b1">Introduction</h2>
<div class="divArticle collapse in article" id="b1">
The weird thing is, it works when I use the regex and DOM script BOTH, but that's going to be kind of sloppy to work with. Can anyone tell me how to modify either my regex or my DOM to make it do the job by itself?