How ever in practice if you want to compare two html files and the output will be customized according to your requirement like you want to change color or add some extra html tags in the modified tags or add any class to the modified node,the awesome way to do it by using nokogiri. here is an example of doing this:
Example: In this example I am adding the <del> tag before the deleted or modified element and just add the newly added elements to the first html file.
1. install nokogiri and nokogiri-diff.
(nokogiri provide the efficient way to modify and access the elements of the htmls)
2. require 'nokogiri/diff' in your code.
3. parsing html by nokogiri, you can read any html file and can parse by nikogiri to get the nokogiri doc for operations.I am just giving the small example by parsing a html string to the nikogiri.
_first_doc = Nokogiri::HTML('<p>hello</p><p>this is demo example</p><p>byee</p>')
_second_doc = Nokogiri::HTML('<p>hii</p><p>this is demo example</p><p> good byee</p>')
4. Get the difference:
_first_doc.diff(_second_doc,:removed => true) do |change,node|
node.replace("<del>#{node.to_html}</del>")
end // adding <del> tag to modified elements(node).
_first_doc.diff(_second_doc,:added => true) do |change,node|
_parent = _first_doc.search(node.parent.path).first
_parent.add_child(node)
end // adding newly added elements in the result.
5.Get the output : now you can see the changes by printing _first_doc.to_html
output will be like:
<html><body>
<del><p>hello</p></del>
<p>hiii</p>
<p>this is demo example</p>
<del><p>byee</p></del>
<p>good byee</p>
</body></html>
Example: In this example I am adding the <del> tag before the deleted or modified element and just add the newly added elements to the first html file.
1. install nokogiri and nokogiri-diff.
(nokogiri provide the efficient way to modify and access the elements of the htmls)
2. require 'nokogiri/diff' in your code.
3. parsing html by nokogiri, you can read any html file and can parse by nikogiri to get the nokogiri doc for operations.I am just giving the small example by parsing a html string to the nikogiri.
_first_doc = Nokogiri::HTML('<p>hello</p><p>this is demo example</p><p>byee</p>')
_second_doc = Nokogiri::HTML('<p>hii</p><p>this is demo example</p><p> good byee</p>')
4. Get the difference:
_first_doc.diff(_second_doc,:removed => true) do |change,node|
node.replace("<del>#{node.to_html}</del>")
end // adding <del> tag to modified elements(node).
_first_doc.diff(_second_doc,:added => true) do |change,node|
_parent = _first_doc.search(node.parent.path).first
_parent.add_child(node)
end // adding newly added elements in the result.
5.Get the output : now you can see the changes by printing _first_doc.to_html
output will be like:
<html><body>
<del><p>hello</p></del>
<p>hiii</p>
<p>this is demo example</p>
<del><p>byee</p></del>
<p>good byee</p>
</body></html>