必要な要素を見つけるために DOM を検索する方法を理解する必要があります。たとえば、タグ名で検索し、特定のタグの前後のコンテキストを調べて、それが探しているものかどうかを確認できます。
何を見つけようとしているのかについてより多くの情報を提供していただければ、より具体的なコードを提供できる可能性があります。
たとえば、ドキュメント内のすべてのタグをdocument.getElementsByTagName("br")検索します。二重タグを探している場合、または二重タグの前後に特定のテキストを探している場合は、<br>それぞれを調べて二重タグを見つけることができます。コメントで述べたように、より具体的なコードを提案する前に、実際に探しているパターンをより具体的にする必要があります。<br><br>
たとえば、<br>ドキュメント内のタグに続く特定のテキスト パターンを検索する方法は次のとおりです。
var items = document.getElementsByTagName("br");
// modify this regex to suit what you're trying to match
var re = /\w+\s\(\w+\)/;
for (var i = 0, len = items.length; i < len; i++) {
var node = items[i];
while ((node = node.nextSibling) && node.nodeType == 3) {
if (re.test(node.nodeValue)) {
// add a marker test node (just for test purposes)
var span = document.createElement("span");
span.className = "marker";
span.innerHTML = "X";
node.parentNode.insertBefore(span, node.nextSibling);
}
}
}
検索で探したいものに正規表現を変更できます。
ここで動作するデモを見ることができます: http://jsfiddle.net/jfriend00/s9VMn/
OK、正規表現を使用して探しているパターンを推測するもう 1 つのショットです。<br>これは、パターンに一致するテキストが後に続く2 つの連続したタグを探します。次に、そのテキストをスパンでラップして、偶数または奇数に従ってスタイルを設定できるようにします。
function getTextAfter(node) {
// collect text from successive text nodes
var txt = "";
while ((node = node.nextSibling) && node.nodeType == 3) {
txt += node.nodeValue;
}
return(txt);
}
function wrapTextInSpan(preNode, cls) {
// collect successive text nodes
// into a span tag
var node = preNode, item;
var span = document.createElement("span");
span.className = cls;
node = node.nextSibling;
while (node && node.nodeType == 3) {
item = node;
node = node.nextSibling;
span.appendChild(item);
}
preNode.parentNode.insertBefore(span, preNode.nextSibling);
return(span);
}
// find double br tags
var items = document.getElementsByTagName("br");
var cnt = 1;
var re = /\w+\s+\([^)]+\)\s+-\s+(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+\d+,\s+\d+\d+/i;
for (var i = 0, len = items.length; i < len; i++) {
var node = items[i];
// collect text from successive text nodes
var txt = "";
while ((node = node.nextSibling) && node.nodeType == 3) {
txt += node.nodeValue;
}
// if no text, check for successive BR tags
if (txt.replace(/\n|\s/g, "") == "") {
if (i + 1 < len && node === items[i + 1]) {
// found a double BR tag
// get the text after it
txt = getTextAfter(node);
if (re.test(txt)) {
wrapTextInSpan(node, "marker" + (cnt % 2 ? "Odd" : "Even"));
++cnt;
}
++i;
}
}
}
ここでの動作デモ: http://jsfiddle.net/jfriend00/ewApy/
実際に展開/折りたたみターゲットを挿入し、セクションの展開/折りたたみを行うもう 1 つのバージョンを次に示します。これは、適切な HTML と jQuery のような優れたライブラリがあれば非常に簡単ですが、どちらも使用しない場合は、さらに多くのコードが必要になります。
function getTextAfter(node) {
// collect text from successive text nodes
var txt = "";
while ((node = node.nextSibling) && node.nodeType == 3) {
txt += node.nodeValue;
}
return(txt);
}
function wrapTextInSpan(preNode, cls) {
// collect successive text nodes
// into a span tag
var node = preNode, item;
var span = document.createElement("span");
span.className = cls;
node = node.nextSibling;
while (node && node.nodeType == 3) {
item = node;
node = node.nextSibling;
span.appendChild(item);
}
preNode.parentNode.insertBefore(span, preNode.nextSibling);
return(span);
}
function wrapBetweenInSpan(preNode, postNode, cls) {
var node = preNode, item;
var span = document.createElement("span");
span.className = cls;
node = node.nextSibling;
if (node && node.nodeType == 1 && node.tagName == "BR") {
preNode = node;
node = node.nextSibling;
}
while (node && node != postNode) {
item = node;
node = node.nextSibling;
span.appendChild(item);
}
preNode.parentNode.insertBefore(span, preNode.nextSibling);
return(span);
}
function toggleClass(el, cls) {
var str = " " + el.className + " ";
if (str.indexOf(" " + cls + " ") >= 0) {
str = str.replace(cls, "").replace(/\s+/, " ").replace(/^\s+|\s+%/, "");
el.className = str;
} else {
el.className = el.className + " " + cls;
}
}
function hasClass(el, cls) {
var str = " " + el.className + " ";
return(str.indexOf(" " + cls + " ") >= 0);
}
function addButton(target) {
var span = document.createElement("span");
span.className = "expandoButton";
span.innerHTML = "+++";
span.onclick = function(e) {
var expando = this;
do {
expando = expando.nextSibling;
} while (expando && !hasClass(expando, "markerContents"));
toggleClass(expando, "notshown");
};
target.parentNode.insertBefore(span, target.nextSibling);
}
// find double br tags
var items = document.getElementsByTagName("br");
var cnt = 1;
var spans = [];
var re = /\w+\s+\([^)]+\)\s+-\s+(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+\d+,\s+\d+\d+/i;
for (var i = 0, len = items.length; i < len; i++) {
var node = items[i];
// collect text from successive text nodes
var txt = "";
while ((node = node.nextSibling) && node.nodeType == 3) {
txt += node.nodeValue;
}
// if no text, check for successive BR tags
if (txt.replace(/\n|\s/g, "") == "") {
if (i + 1 < len && node === items[i + 1]) {
// found a double BR tag
// get the text after it
txt = getTextAfter(node);
if (re.test(txt)) {
var span = wrapTextInSpan(node, "marker marker" + (cnt % 2 ? "Odd" : "Even"));
spans.push(span);
++cnt;
}
++i;
}
}
}
// now wrap the contents of each marker
for (i = 0, len = spans.length; i < len; i++) {
wrapBetweenInSpan(spans[i], spans[i+1], "markerContents shown");
addButton(spans[i]);
}
このバージョンの動作デモ: http://jsfiddle.net/jfriend00/cPbqC/