CODEWITHSUNDEEP
javascripthtmlregex
AlexShevyakov
AlexShevyakov

Reputation: 423

Use of RegExp to find, copy and paste content of tags

I have a long HTML file where I need to make a relatively simple substitution, which, nevertheless, cannot be achieved by simple find/replace. I was wondering if RegExp could help me do the job.

So, here is the HTML piece:

<div class="panelHeader">
        <span class="QN_header">Info1</span>
        <span class="QT_header">Info2</span>
    </div>                                          

<div id="QXXXX" class="panelContent">
    <div class="Question">                      
        <span class="QNumber"></span>
        <span class="QText"></span>
    </div>
  <!-- some more tags here -->
</div>

Thus at the end it should look like:

<div class="panelHeader">
        <span class="QN_header">Info1</span>
        <span class="QT_header">Info2</span>
    </div>                                          

<div id="QXXXX" class="panelContent">
    <div class="Question">                      
        <span class="QNumber">Info1</span>
        <span class="QText">Info2</span>
    </div>
  <!-- some more tags here -->
</div>

What I need is:

  1. Copy Info1 from <span class="QN_header">;
  2. Insert it into <span class="QNumber">;
  3. Copy Info2 from <span class="QT_header">;
  4. Insert it into <span class="QText">;

If it is achievable in several iterations - that's ok; much better then copy/pasting it manually throughout the file.

Thanks in advance.

UPDATE: The whole REPEATABLE piece of the code is below. It then repeats itself.

<div class="panelHeader">                       <!-- BEGIN OF PANEL HEADER -->              
    <span class="QN_header"></span>
    <span class="QT_header"></span>
</div>                                          <!-- END OF PANEL HEADER -->

<div id="QXXXX" class="panelContent">           <!-- BEGIN OF CONTENT-->
    <div class="Question">                      
        <span class="QNumber"></span>
        <span class="QText"></span>
    </div>

    <div class="Guidance"><p></p></div>
    <div class="Response">
        <div class="responseControls">
            <label><input type="radio" name="RadioXXXX" value="Y" id="RXXXXY" onchange='radioChange(this, "XXXX")' />Yes</label>
            <label><input type="radio" name="RadioXXXX" value="N" id="RXXXXN" onchange='radioChange(this, "XXXX")' />No</label>
            <label><input type="radio" name="RadioXXXX" value="NS" id="RXXXXNS" onchange='radioChange(this, "XXXX")' />Not Seen</label>
            <label><input type="radio" name="RadioXXXX" value="NA" id="RXXXXNA" onchange='radioChange(this, "XXXX")' />Not Applicable</label>
        </div>
        <div class="responseDetails">
            <div class="Observation">
                <label for="ObsXXXX">Observation:</label>
                <textarea name="observation" id="ObsXXXX" rows="6" disabled ></textarea></div>
            <div class="DueDate">
                <label for="DueDateXXXX">Due date:<br /></label>
                <input name="DueDate" class="DueDate_in" type="text" id="DueDateXXXX"/>
            </div>

            <div class="actions">
                <label for="paXXXX">Actions required to correct and/or prevent this observation:</label>
                <textarea name="actions" id="paXXXX" rows="6"></textarea>
            </div>
        </div>                                  <!-- End of ResponseDetails -->
    </div>                                      <!-- End of Response -->
</div>                                          <!-- END OF CONTENT -->

Upvotes: 0

Views: 223

Answers (2)

palmsey
palmsey

Reputation: 5832

Using something like jQuery probably makes more sense than regular expressions. You could copy the values in your example with:

$('.panelHeader').each(function() {
    var header = $(this);
    var qn = header.find('.QN_header').text();
    var qt = header.find('.QT_header').text();
    var content = header.next('.panelContent');
    content.find('.QNumber').text(qn);
    content.find('.QText').text(qt);
});

JSFiddle example

Upvotes: 1

davidkonrad
davidkonrad

Reputation: 85518

If they just are repeating systematically after each other, in a long row - try this :

var panelHeaders = document.querySelectorAll('.panelHeader');
var panelContents = document.querySelectorAll('.panelContent');
for (var i=0;i<panelHeaders.length;i++) {
    panelContents[i].querySelector('.QNumber').innerHTML = panelHeaders[i].querySelector('.QN_header').innerHTML;
    panelContents[i].querySelector('.QText').innerHTML = panelHeaders[i].querySelector('.QT_header').innerHTML;
}

fiddle -> http://jsfiddle.net/8su4y/

Upvotes: 1

Related Questions