I need to merge direct html siblings into just one in page code including text nodes.

<div>some text 
<b>some text</b> som
e text <b>text</b><b> more text</b> some te
xt</div>

This is actualy output after editing the code using rangy and jQuery and i need to clear it after the editing so it will look like this:

<div>some text <b>some text</b> some text <b>text more text</b> some text</div>

I would like to use jQuery to do this. I am aware of functions unwrap() and wrapAll() but i cant bine them effectively. Thanks for any clue or help!

I need to merge direct html siblings into just one in page code including text nodes.

<div>some text 
<b>some text</b> som
e text <b>text</b><b> more text</b> some te
xt</div>

This is actualy output after editing the code using rangy and jQuery and i need to clear it after the editing so it will look like this:

<div>some text <b>some text</b> some text <b>text more text</b> some text</div>

I would like to use jQuery to do this. I am aware of functions unwrap() and wrapAll() but i cant bine them effectively. Thanks for any clue or help!

• javascript
• jquery
• html
• dom

• 3 So, essentially, all you want to do is get rid of the linebreaks? – Kevin B Commented Feb 13, 2014 at 16:53
• I think what he wants is to turn this <b>text</b><b> more text</b> into this <b>text more text</b>. Actually that's a really good question. – Fabricio Commented Feb 13, 2014 at 16:55
• @PatrickEvans no there not <b>text more text</b> has been bined from <b>text</b><b> more text</b>. – AfromanJ Commented Feb 13, 2014 at 16:57
• Why u cann't use replace function!! – Jain Commented Feb 13, 2014 at 16:58
• I think he wants to bine elements only if they are the same. Though, I don't know why you would bother – Barbara Laird Commented Feb 13, 2014 at 16:58

3 Answers 3

You need to iterate over child nodes one by one; paring nodes with previous one and bine if necessary. It can be as plicated as you want; but here is a start:

$("div").each(function (i) {
    $(this).find("*").each(function () {
        var that = this.previousSibling;
        if (that && that.nodeType === Node.ELEMENT_NODE && that.tagName === this.tagName) {
            var node = document.createElement(this.tagName);
            while (that.firstChild) {
                node.appendChild(that.firstChild);
            }
            while (this.firstChild) {
                node.appendChild(this.firstChild);
            }
            this.parentNode.insertBefore(node, this.nextSibling);
            that.parentNode.removeChild(that);
            this.parentNode.removeChild(this);
        }
    });
});

Demo here

If i understood your question correctly, you wanted to bine elements that are next to each other of the same type.

var $div = $("#mydiv");
console.log($div.html());

$div.contents().each(function(){
    if (this.nodeType != 1) return;
    while (this.nextSibling && this.nextSibling.tagName == this.tagName) {
        this.innerHTML = (this.innerHTML + this.nextSibling.innerHTML);
        this.parentNode.removeChild(this.nextSibling);
    }
});

console.log($div.html());

http://jsfiddle/X8LYu/2/

If you also wanted to remove the new-line characters, it would change to this:

var $div = $("div");
console.log($div.html());

$div.contents().each(function(){
    if (this.nodeType == 3) {
        this.nodeValue = this.nodeValue.replace(/\n/g,"");
        return;
    }
    if (this.nodeType != 1) return;
    while (this.nextSibling && this.nextSibling.tagName == this.tagName) {
        this.innerHTML = (this.innerHTML + this.nextSibling.innerHTML).replace(/\n/g,"");
        this.parentNode.removeChild(this.nextSibling);
    }
});

console.log($div.html());

http://jsfiddle/X8LYu/3/

I don't write code in this way very often, so there might be better ways of handling this.

$('div').html(function(_, oldHTML) {
   return oldHTML.replace(/\n/g, '');
}).children().filter(function () {
    return this.nextSibling 
           && this.nextSibling.nodeName === this.nodeName;
}).text(function (_, oldText) {
    return oldText + this.parentNode.removeChild(this.nextSibling).textContent;
});

http://jsfiddle/tVZJV/