0

想要通过从 table 的 outerHTML 中提取来获取 table 定义的 HTML，寻找 '> 不管 <' 的索引

尝试了几种模式和 match() 但没有运气。

<!DOCTYPE html>
<html>
    <head>     
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <!-- <thead> not on same line as <table> -->
        <table  id="t1" border="1">         
            <thead>
                <tr>   <th colspan="2">1</th><th colspan="3">22 </th></tr>
                <tr>    <th>1</th><th  data-rotate>22</th><th data-rotate>333</th><th>4444</th><th>5555555</th></tr>
            </thead>
            <tr><td>aaaaaaa</td><td>bbbbbbbbb</td><td>cccccccccc</td><td>ddddd<br>ddddddd</td><td>dddddddddddd</td></tr>
        </table>
        <!-- <thead> on same line as <table> -->
        <table  id="t2" border="1" >  <thead>                  
                <tr>   <th colspan="2">1</th><th colspan="3">22 </th></tr>
                <tr>    <th>1</th><th  data-rotate>22</th><th data-rotate>333</th><th>4444</th><th>5555555</th></tr>
            </thead>
            <tr><td>aaaaaaa</td><td>bbbbbbbbb</td><td>cccccccccc</td><td>ddddd<br>ddddddd</td><td>dddddddddddd</td></tr>
        </table>
        <p>
        <div id="out1"></div>
        <p>
        <div id="out2"></div>
        <script>
            /*****************************************
             * want to get the HTML for a table definition
             * by extracting <table ...> from outer html, looking
             * for the index of '> whatever <' 
             *****************************************/
            var m, t, oh, index;
            /*****************************************
             * does not work
             *****************************************/
            t = document.getElementById('t1');
            oh = t.outerHTML;
            index = oh.search(/\> *</); // what is wrong with  regex
            document.getElementById('out1').innerHTML = htmlentity(oh.substring(0, index + 1));
            /*****************************************
             * works
             *****************************************/
            t = document.getElementById('t2');
            oh = t.outerHTML;
            index = oh.search(/\> *\</);
            document.getElementById('out2').innerHTML = htmlentity(oh.substring(0, index + 1));

            function htmlentity(value) {
                value = value.replace(/&/gi, "&amp;");
                value = value.replace(/</gi, "&lt;");
                value = value.replace(/>/gi, "&gt;");
                value = value.replace(/"/gi, "&quot;");
                value = value.replace(/'/gi, "&#039;");
                return value;
            }
        </script>
    </body>
</html>

```

第一个表定义“t1”不适用于我的正则表达式。第二个表定义“t2”确实适用于我的正则表达式。

输出：

在此处输入图像描述

我为查询做了一个小提琴。

https://jsfiddle.net/op5uv6mg/5/

$(document).ready(function () {


$("div").find("input[id^='sectionId_']").css("border", "1px solid green");


$("div").find("input[id^='sectionId_1_']").css("border", "1px solid pink");


});
4

2 回答 2

2

正则表达式有什么问题

正则表达式是解析 HTML 的错误工具。（必填链接。）它们可能是HTML 解析器的一部分，但单独的单个表达式无法完成这项任务。

想要获取表定义的 HTML

我会采取更直接的方法：表已经被解析，所以只需克隆它，从克隆中删除所有文本节点，然后（如果你需要 HTML 而不仅仅是节点树）得到它outerHTML：

function extractStructure(element) {
    const clone = element.cloneNode(true);
    removeText(clone);
    return clone.outerHTML;
}
function removeText(element) {
    let child = element.firstChild;
    while (child) {
        let next = child.nextSibling;
        if (child.nodeType === 1) { // Element
            removeText(child);
        } else if (child.nodeType === 3) { // Text
            element.removeChild(child);
        }
        child = next;
    }
}


function extractStructure(element) {
    const clone = element.cloneNode(true);
    removeText(clone);
    return clone.outerHTML;
}
function removeText(element) {
    let child = element.firstChild;
    while (child) {
        let next = child.nextSibling;
        if (child.nodeType === 1) { // Element
            removeText(child);
        } else if (child.nodeType === 3) { // Text
            element.removeChild(child);
        }
        child = next;
    }
}
console.log(extractStructure(document.getElementById("t1")));
console.log(extractStructure(document.getElementById("t2")));
<table  id="t1" border="1">         
    <thead>
        <tr>   <th colspan="2">1</th><th colspan="3">22 </th></tr>
        <tr>    <th>1</th><th  data-rotate>22</th><th data-rotate>333</th><th>4444</th><th>5555555</th></tr>
    </thead>
    <tr><td>aaaaaaa</td><td>bbbbbbbbb</td><td>cccccccccc</td><td>ddddd<br>ddddddd</td><td>dddddddddddd</td></tr>
</table>
<!-- <thead> on same line as <table> -->
<table  id="t2" border="1" >  <thead>                  
        <tr>   <th colspan="2">1</th><th colspan="3">22 </th></tr>
        <tr>    <th>1</th><th  data-rotate>22</th><th data-rotate>333</th><th>4444</th><th>5555555</th></tr>
    </thead>
    <tr><td>aaaaaaa</td><td>bbbbbbbbb</td><td>cccccccccc</td><td>ddddd<br>ddddddd</td><td>dddddddddddd</td></tr>
</table>

于 2019-06-19T13:04:20.037 回答
0

在 t1 正在返回线路

<table  id="t1" border="1">         
    <thead>

在您的正则表达式中，您选择 /> 之后剩下的所有内容可能会尝试贪婪吗？

试试这个 index = oh.search(/\>.*?/);

代码：

    const regexT = />.*?/;
    t = document.getElementById('t1');
    oh = t.outerHTML;
    index = oh.search(regexT);
    document.getElementById('out1').innerHTML = htmlentity(oh.substring(0, index + 1));
    t = document.getElementById('t2');
    oh = t.outerHTML;
    index = oh.search(regexT);
    document.getElementById('out2').innerHTML = htmlentity(oh.substring(0, index + 1));

旁注：在这种情况下，模式匹配可能不是最好的方法（参见 TJ Crowder 的回答）

于 2019-06-19T13:07:10.430 回答