jsbin

Question

我是jQuery的新手。我想做一个chrome扩展。但是有些网页的HTML如下所示，我想要预处理并使其更清洁。

<div>
  Hello 
  <a href="#">World</a>
  !!!!!!
  <br />
  Nice to meet you
  <img src="#">
</div>

我想将<br>标记分隔的所有文本节点包装到p标记中，但跳过其间的a标记，最后删除<br>标记。（它只是跳过a标签，不应跳过任何其他标签，文本应该包裹到那一点）。以上示例应转换如下：

<div>
  <p>Hello <a href="#">World</a>!!!!!!</p>
  <p>Nice to meet you</p>
  <img src="#">
</div>

如何使用jQuery进行上述转换？

我找到了相关的答案，但不知道如何跳过a代码。

$("body br").each(function () {
  $.each([this.previousSibling, this.nextSibling], function() {
    if (this.nodeType === 3) { 
      $(this).wrap('<p></p>');
    }
    // Should skip over a tags
  });

  $(this).remove(); 
});

另一次尝试，但失败了（要合并的最后一个元素出现两次）。 http://jsfiddle.net/c7vgzsry/2/

//Wrap all <br> tags with <p>
var to_be_deleted = new Array();
var just_finished = false;

function is_finished() {
    return just_finished;
}
function set_finished(val) {
    just_finished = val;
}

$('body br').each ( function () {
    $.each ([this.previousSibling, this.nextSibling], function () {
        if (this.nodeType === 3) { // 3 == text
            if ($(this).parent().is("p")) {
                console.log("Parent is p");
            }
            if (this.nextSibling) {

                var curr = this.nextSibling;
                var count = 0;         // How many elements merged
                var till_now = $('<p class="merged_block">');
                $(till_now).append($(this).clone());
                while (curr) {
                    if (curr.tagName === "A") {
                        var a_elem = $(curr).clone();
                        $(till_now).append(a_elem);
                        to_be_deleted.push(curr);
                        count++;

                    } else if (curr.nodeType === 3) {
                        var n_elem = $(curr).clone();
                        $(till_now).append(n_elem);
                        to_be_deleted.push(curr);
                        count++;

                    } else {
                        break;
                    }

                    curr = curr.nextSibling;
                }

                if (count > 0) {
                    $(this).before(till_now);
                    $(this).remove();
                    set_finished(true);
                }

            } else {
                if (is_finished()) {
                    $(this).remove();
                    set_finished(false);
                } else {
                    $(this).wrap('<p></p>');  // Last <br/>
                }

            }
        }
    } );

    $(this).remove(); //-- Kill the <br>
} );

$.each(to_be_deleted, function (i,e) {
    $(e).remove();
});

Answer 1

以下是我解决问题的方法：

＆＃13;

$(document).ready(function(){
    var dad = document.getElementById("dad"),
        container = document.getElementById("container"),
        elem = container.childNodes,
        parent = document.createElement("div"),
        newElem = document.createElement("p");

    while($(container).html() !== "") {
        if (elem[0].nodeName == "#text") {
            newElem.appendChild(elem[0]);
            elem.data = "";
        } else if (elem[0].nodeName == "BR") {
            parent.appendChild(newElem);
            newElem = document.createElement("p");
            container.removeChild(elem[0]);
        } else {
            newElem.appendChild(elem[0]);
            container.removeChild(elem[0]);
        }
    }
    parent.appendChild(newElem);
    newElem = document.createElement("p");

    dad.removeChild(container);
    parent.id = "container";
    dad.appendChild(parent);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="dad">
  <div class="container" id="container">
    Hello 
    <a href="#">World</a>
    !!!!!!
    <br />
    Nice to meet you
    <img src="#">
  </div>
</body>

＆＃13;

如何使用混合<a> tags with jQuery?</a>包装文本节点

1 个答案:

jsbin