Question

I have 2 nodesets that have the following contents;

obj1 "<p>the quick <b>brown</b> fox jumped over the fence</p>"
obj2 "<p>the quick <b>brown</b> fox </p>"

I am attempting to match the contents of obj1 with obj2 and then remove the matched nodes to leave behind an object that looks like.

output "<p>jumped over the fence</p>"

Using jquery $.match returns an error and $.find yields no results either, is there any other effective method of doing what I am trying to work out?

Answer 1

Not sure if this fits the requirements, but the variables looks like HTML strings to me, and it looks like you want to compare the string word by word whitout loosing the original main element, and I would do something like:

var obj1 = "<p>the quick <b>brown</b> fox jumped over the fence</p>",
    obj2 = "<p>the quick <b>brown</b> fox </p>";

var obj3 = compare(obj1, obj2);

$('body').append(obj3);


function compare(elm1, elm2) {
    var obj = [],
        o1 = String($(elm1).html()).split(' '), //get <p>'s inner HTML as string and split on spaces to get each word
        o2 = String($(elm2).html()).split(' ');

    $.each(o1, function(i,e) { //iterate over each word inside <p> of first string
        if (e !== o2[i]) obj.push(e); //check if matches each word in the same loaction in the second string
    });
    //we should now have an array of the words that does not match each other
    return $(elm1).clone().html(obj.join(' ')); //join with new spaces and return the string as html contained in a clone of the original element.
}

FIDDLE

FIDDLE as a function to call (seems simpler) !

Should add that this won’t work for something like :

var obj1 = "<p>the quick <b>brown</b> fox jumped over the fence</p>",
    obj2 = "<p>fox jumped over the fence</p>";

as those strings does not word for word match, all though the second is part of the first etc. but to remove the similar parts of the string in such an event you could always just do :

var obj1 = "<p>the quick <b>brown</b> fox jumped over the fence</p>",
    obj2 = "<p>fox jumped over the</p>",
    o1 = String($(obj1).html()),
    o2 = String($(obj2).html());

var obj = $(obj1).clone().html(o1.replace(o2, ''));

FIDDLE