Hopefully not too tricky this one...
I am trying to get just the context between the <!-- itemtemplate -->
ments using javascript (with the jQuery plugin). The result must exclude the ments though. In this case the parent is a table, but it can be anything such as a div
Table
<table id="lvList" class="grid1">
<tr>
<th>Name </th>
<th>Number </th>
<th>Type </th>
<th>Account Manager </th>
</tr>
<!-- itemtemplate -->
<tr>
<td><boundfield output="hyperlink" datafield="name" dataurlfields="id" dataurlformat="details/?id={0}" /></td>
<td><boundfield output="string" datafield="id" /></td>
<td><boundfield output="string" datafield="type" /></td>
<td><boundfield output="string" datafield="accmgr" /></td>
</tr>
<!-- itemtemplate -->
</table>
Div
<div id="lvList">
<!-- itemtemplate -->
something something something
<boundfield output="string" datafield="id" />
<!-- itemtemplate -->
</div>
Thanks to Felix for the idea
function GetTemplate(root, name) {
var output = "";
var record = false;
function iterate(node) {
var children = node.childNodes;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.nodeType === 3 && child.nodeValue.trim() === "") continue;
if (child.nodeType === 8 && child.nodeValue.trim() === name) {
if (!record) { record = true; continue; }
else { break; }
}
if (record)
output += outerHTML(child);
else {
if (child.hasChildNodes)
iterate(child);
}
}
}
iterate(root);
return output;
};
function ClearTemplate (root, name) {
var record = false;
function iterate(node) {
var children = node.childNodes;
for (var i = children.length - 1; i >= 0; i--) {
var child = children[i];
if (child.nodeType === 8 && child.nodeValue.trim() === name) {
if (!record) { record = true; continue; }
else { break; }
}
if (record)
node.removeChild(child);
else {
if (child.hasChildNodes)
iterate(child);
}
}
}
iterate(root);
};
function InsertInto (root, name, items) {
function iterate(node) {
var children = node.childNodes;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.nodeType === 3 && child.nodeValue.trim() === "") continue;
if (child.nodeType === 8 && child.nodeValue.trim() === name) {
for (var n = items.length - 1; n >= 0; n--)
child.parentNode.insertBefore(items[n], child.nextSibling);
break;
}
if (child.hasChildNodes)
iterate(child);
}
}
iterate(root);
};
String.prototype.trim = function () {
return this.replace(/^(\s| |\u00A0)+|(\s| |\u00A0)+$/g, "");
};
function outerHTML(node) {
return node.outerHTML ||
(function (n) {
var div = document.createElement('div');
div.appendChild(n.cloneNode(true));
return div.innerHTML;
})(node);
};
Hopefully not too tricky this one...
I am trying to get just the context between the <!-- itemtemplate -->
ments using javascript (with the jQuery plugin). The result must exclude the ments though. In this case the parent is a table, but it can be anything such as a div
Table
<table id="lvList" class="grid1">
<tr>
<th>Name </th>
<th>Number </th>
<th>Type </th>
<th>Account Manager </th>
</tr>
<!-- itemtemplate -->
<tr>
<td><boundfield output="hyperlink" datafield="name" dataurlfields="id" dataurlformat="details/?id={0}" /></td>
<td><boundfield output="string" datafield="id" /></td>
<td><boundfield output="string" datafield="type" /></td>
<td><boundfield output="string" datafield="accmgr" /></td>
</tr>
<!-- itemtemplate -->
</table>
Div
<div id="lvList">
<!-- itemtemplate -->
something something something
<boundfield output="string" datafield="id" />
<!-- itemtemplate -->
</div>
Thanks to Felix for the idea
function GetTemplate(root, name) {
var output = "";
var record = false;
function iterate(node) {
var children = node.childNodes;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.nodeType === 3 && child.nodeValue.trim() === "") continue;
if (child.nodeType === 8 && child.nodeValue.trim() === name) {
if (!record) { record = true; continue; }
else { break; }
}
if (record)
output += outerHTML(child);
else {
if (child.hasChildNodes)
iterate(child);
}
}
}
iterate(root);
return output;
};
function ClearTemplate (root, name) {
var record = false;
function iterate(node) {
var children = node.childNodes;
for (var i = children.length - 1; i >= 0; i--) {
var child = children[i];
if (child.nodeType === 8 && child.nodeValue.trim() === name) {
if (!record) { record = true; continue; }
else { break; }
}
if (record)
node.removeChild(child);
else {
if (child.hasChildNodes)
iterate(child);
}
}
}
iterate(root);
};
function InsertInto (root, name, items) {
function iterate(node) {
var children = node.childNodes;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.nodeType === 3 && child.nodeValue.trim() === "") continue;
if (child.nodeType === 8 && child.nodeValue.trim() === name) {
for (var n = items.length - 1; n >= 0; n--)
child.parentNode.insertBefore(items[n], child.nextSibling);
break;
}
if (child.hasChildNodes)
iterate(child);
}
}
iterate(root);
};
String.prototype.trim = function () {
return this.replace(/^(\s| |\u00A0)+|(\s| |\u00A0)+$/g, "");
};
function outerHTML(node) {
return node.outerHTML ||
(function (n) {
var div = document.createElement('div');
div.appendChild(n.cloneNode(true));
return div.innerHTML;
})(node);
};
Share
Improve this question
edited Sep 29, 2011 at 19:19
Christian
asked Sep 29, 2011 at 8:44
ChristianChristian
3,9823 gold badges43 silver badges61 bronze badges
7
-
1
why don't you use
jQuery.tmpl()
plugin? – Robert Koritnik Commented Sep 29, 2011 at 8:47 - is it always the second TR that you're trying to get? – Robert Koritnik Commented Sep 29, 2011 at 8:47
- This looks like a terrible home-brew of a template language. If you can, you should use jQuery Template or something similar. – Asbjørn Ulsberg Commented Sep 29, 2011 at 8:48
- @Robert will look into tmpl now but no, not always the 2nd tr – Christian Commented Sep 29, 2011 at 8:48
- How do you get this content: it's a DOM element's or string or response of xmlhttprequest? – Andrew D. Commented Sep 29, 2011 at 8:53
3 Answers
Reset to default 6Neither regex nor jQuery: The idea is to iterate over all child nodes and check whether the node is a ment node and if yes, whether it contains a certain string, e.g. itemtemplate
.
function extract(node, needle) {
var children = node.childNodes,
record = false,
container = document.createDocumentFragment();
for(var i = 0, l = children.length; i < l; i++) {
var child = children[i];
if(child.nodeType === 8 && child.nodeValue === needle) {
record = !record;
continue;
}
if(record) {
container.appendChild(child.cloneNode(true));
}
}
return container;
}
Usage:
var nodes = extract(someParent, ' itemtemplate ');
DEMO
I don't know whether this is the best solution for you situation, you don't give any information about the context.
Parsing XML data (as HTML is a type of) using regular expressions is bound to fail. I suggest you use a tool specifically designed for parsing XML. In javascript, DOMParser can be used for this.
Link to w3schools for using this.
You can try this
var result = '<div id="lvList"><!-- itemtemplate -->something something
something<boundfield output="string" datafield="id" /><!-- itemtemplate --></div>'
.split(/<!--\s*itemtemplate\s*-->/)
result[1] will have the desired text you want.