У меня есть длинный HTML файл, где мне нужно сделать относительно простую замену, которая, тем не менее, не может быть достигнута путем простого поиска/замены. Мне было интересно, сможет ли RegExp помочь мне справиться с этой задачей.
Итак, вот фрагмент HTML:
<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>
Таким образом, в конце он должен выглядеть так:
<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>
Что мне нужно:
<span class="QN_header">
;<span class="QNumber">
;<span class="QT_header">
;<span class="QText">
;Если это достижимо в нескольких итерациях - это нормально; гораздо лучше, чем копировать/вставлять его вручную по всему файлу.
Заранее спасибо.
ОБНОВЛЕНИЕ: весь ПОВТОРНЫЙ фрагмент кода приведен ниже. Затем он повторяется.
<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 -->
Если они просто повторяются последовательно друг за другом, в длинном ряду - попробуйте следующее:
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;
}
скрипка → http://jsfiddle.net/8su4y/
Использование чего-то вроде jQuery, вероятно, имеет больше смысла, чем регулярные выражения. Вы можете скопировать значения в вашем примере с помощью:
$('.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);
});
QN_Header
принадлежит к какомуQNumber
?