您必须弄清楚如何搜索 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/
好的,这里又是一个使用正则表达式猜测您正在寻找什么模式的机会。这将查找两个连续<br>
的标签,后跟与模式匹配的文本。然后它将该文本包装在一个跨度中,以便可以根据偶数或奇数对其进行样式设置。
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/
这是另一个版本,它实际上插入了展开/折叠目标并进行部分的展开/折叠。使用正确的 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/