You could just use a simple Regex. What you want to do is when you are in the Calibre Editor, when you do a Find, you want to make sure that you set the Mode to "Regex":
 
Then you can use this Search/Replace:
Search: <span class="fraction"><span class="numerator">
([0-9]+)</span><span class="virgule">⁄</span><span class="denominator">
([0-9]+)</span></span>
Replace: \1/
\2
In English:
What this says in English is: "find the spans with fraction + numerator" + 
"grab the number and stick it in \1" + "find the spans with the virgule and denominator" + "
grab the number and stick it in \2".
Replace with "
the first captured number" + "slash" + "
the second captured number".
Your examples:
<li class="ing"><span class="fraction"><span class="numerator">
1</span><span class="virgule">⁄</span><span class="denominator">
8</span></span> teaspoon freshly ground black pepper</li>
<li class="ing"><span class="fraction"><span class="numerator">
1</span><span class="virgule">⁄</span><span class="denominator">
3</span></span> cup dried cranberries</li>
This should give you the exact output you were looking for.