【问题标题】:Get content between comments获取评论之间的内容
【发布时间】:2011-09-29 08:44:12
【问题描述】:

希望这个不要太棘手......

我正在尝试使用 javascript(使用 jQuery 插件)获取 <!-- itemtemplate --> cmets 之间的上下文。结果必须排除 cmets。在这种情况下,父级是一个表,但它可以是任何诸如 div 之类的东西

表格

<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 id="lvList">
  <!-- itemtemplate -->
     something something something
     <boundfield output="string" datafield="id" />
  <!-- itemtemplate -->
</div>

感谢 Felix 的创意

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|&nbsp;|\u00A0)+|(\s|&nbsp;|\u00A0)+$/g, "");
};
function outerHTML(node) {
    return node.outerHTML || 
            (function (n) {
                var div = document.createElement('div');
                div.appendChild(n.cloneNode(true));
                return div.innerHTML;
            })(node);
};

【问题讨论】:

  • 为什么不用jQuery.tmpl()插件?
  • 您是否总是想要获得第二个 TR?
  • 这看起来像是一种糟糕的自制模板语言。如果可以的话,你应该使用 jQuery 模板或类似的东西。
  • @Robert 现在会调查 tmpl 但不,不总是第二个 tr
  • 你如何得到这个内容:它是一个DOM元素或字符串或xmlhttprequest的响应?

标签: javascript jquery regex


【解决方案1】:

regex 和 jQuery 都不是:这个想法是遍历所有子节点并检查该节点是否是评论节点,如果是,它是否包含某个字符串,例如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;
}

用法:

var nodes = extract(someParent, ' itemtemplate ');

DEMO

我不知道这是否是适合您情况的最佳解决方案,您没有提供有关上下文的任何信息。

【讨论】:

  • 这很好,假设这些 cmets 是父级中唯一的。如果我在其他地方添加 ,这不会失败吗?
  • @Christian:不,它会将评论文本与您传递的第二个参数进行比较。我添加了一个示例。
  • 刚刚收到,抱歉今天早上 5 点开始 :)
  • 只是稍微改变了你的代码,如上所示,但其他方面都很完美,谢谢哥们。
【解决方案2】:

使用正则表达式解析 XML 数据(作为 HTML 的一种)注定会失败。 我建议您使用专门为解析 XML 设计的工具。在 javascript 中,可以使用 DOMParser。

Link to w3schools for using this.

【讨论】:

  • DOMParser() 不是完全跨浏览器。而且 HTML 不是 XML 的一种——它们都是 SGML 的衍生物。
【解决方案3】:

你可以试试这个

var result = '&lt;div id="lvList"&gt;&lt;!-- itemtemplate --&gt;something something <br>something&lt;boundfield output="string" datafield="id" /&gt;&lt;!-- itemtemplate --&gt;&lt;/div&gt;'<br>.split(/&lt;!--\s*itemtemplate\s*--&gt;/)

result[1] 将包含您想要的文本。

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-03-21
  • 1970-01-01
  • 2022-06-10
  • 1970-01-01
相关资源
最近更新 更多