javascript - 根据 <img> 标签拆分 html 页面

Question

HTML 页面:

<div id="d"
    <p>one</p>
    <p>two</p>
    <img class="select image" scr="something>
    <p>SPLIT HERE<p>
    <p>end</p>
</div>

伪代码:

var element = $("#d");
  elemnet.split("img").such that =
split_one = <p>one</p><p>two</p>
split_two = <p>split here<p><p>end</p>
split_three = Name of img class i.e = select image

HTML PAGE 可能在一个 div 中包含一个或多个图像类？

Answer 1

使用split()

html = '<div id="d"<p>one</p><p>two</p><img class="select image" scr="something><p>SPLIT HERE<p><p>end</p></div>';
html.split(/<img class="(.*)"\sscr=[^<]+/);

输出:

["<div id="d"<p>one</p><p>two</p>", "select image", "<p>SPLIT HERE<p><p>end</p></div>"]

你也可以使用exec()

matches = /(.*)<img class="(.*)"\sscr=[^<]+(.*)/g.exec(html);

输出:

matches[1] // <- "<div id="d"<p>one</p><p>two</p>"
matches[2] // <- "select image"
matches[3] // <- "<p>SPLIT HERE<p><p>end</p></div>" 

使用replace()；如果你想要上面提到的顺序，下面的表达式将重新排序捕获组

html.replace(/(.*)<img class="(.*)"\sscr=[^<]+(.*)/g, "$1|$3|$2").split("|");

输出:

["<div id="d"<p>one</p><p>two</p>", "<p>SPLIT HERE<p><p>end</p></div>", "select image"]

工作 jsBin