Question

我需要能够将某些元素分别存储在数据库中，但是在检索时需要重新构建HTML以供显示。我们的解决方案（对建议开放）是存储条目的 leadingHTML 和 trailngHTML 属性。

这应该为我们提供尽可能灵活的能力 - 但只有一个问题。我试图编写代码来解析HTML，我正在撞墙。以下面的HTML为例：

<h1>this is leadingHTML</h1>
<h2>this is leadingHTML2</h2>
<p class='select' id='1'>A1</p>
<h1 >this is trailngHTML</h1>
<h2>this is trailngHTML2</h2>
<p class='select' id='2'>A2</p>
<h1>this is trailngHTML3</h1>
<h2>this is trailngHTML4</h2>
<p class='select' id='3'>A3</p>
<figure id='fig'>
  <figCaption>
    this is some text
   <span class='select'>B1</span>
     <div>some text <span class='select'>B2</span></div>
</figCaption>
<img class='select' alt='test' src='test.jpg'/>
<img class='select' alt='test' src='test.jpg'/>
<img class='select' alt='test'  src='test.jpg'/>
</figure>
<p class="select">A4</p>

使用“select”类获取所有元素很容易。但我真的可以使用帮助获取HTML字符串在这些元素之间。对于元素<p class='select' id='3'>A3</p>，我需要一个可以返回以下字符串的函数：值：

元素

<p class='select' id='3'>A3</p>

leadingHTML

leadingHTML= '<h1>this is trailngHTML3</h1><h2>this is trailngHTML4</h2>'

trailingHTML

trailingHTML= '<figure id='fig><figCaption>this is some text'

这样，我可以按照项目所需的方式存储元素，但仍然可以重构HTML以供显示。

我们正在使用Node.js作为后端，所以这需要用Javascript编写。经过很多挫折之后，我非常相信没有一些丑陋的代码就没有办法做到这一点？任何帮助深表感谢。

到目前为止，这就是我所拥有的（不能说我很自豪）：

var checkChildren = function walk(node,state,func){
    if (state.isPt===false){
        var state=func(node,state);
    }
    else if(state.isPt===true){
        return state;
    }
    node=$(node).children().first();
    while (node.length>0 && state.isPt!==true){
         state=walk(node,state,func);
         node=$(node).next();
    }
    return state;
};

function getTrailing(start,html){
var checkFind = $(start).find('.pt');
if (checkFind.length>0){
    //selector is in the child somewhere
    state= { html: html, isPt: false}; 
    var getChildHTML = checkChildren(start,state,function(node,state){
        if ($(node).is($(checkFind).first())){
            return { html: html, isPt: true,};  
        } else{
                html=html+'<'+$(node)[0].name;
                for (var key in $(node)[0].attribs){
                        html=html+" "+key+"='"+$(node)[0].attribs[key]+"'";
                };
                html=html+'>';
                return { html: html, isPt: false,};  
        }
    });
        return getChildHTML;
} else{
    return html;
}
}

var start1 = $("#fig");
var html = '';
test=getTrailing(start1,html);

它正在返回：

{ html: '<figure id=\'fig\' class=\'test\' style=\'color:red;\'><figcaption class=\'test\' style=\'color:red;\'><span><div>',
  isPt: true }

更新澄清一下 - 输出可能是无效的HTML。我只需要在两个感兴趣的元素之间使用所有HTML的字符串。如果感兴趣的第二个元素是后代，那么结果将是无效的HTML（因为字符串应该在找到下一个元素时立即停止）。

在Javascript / Node.js中以递归方式获取两个元素之间的所有HTML - 不包括结束标记

0 个答案: