Как заменить определенные теги, содержащие выбранные ярлыки

Я хочу заменить некоторые определенные промежутки кнопками, и промежутки, которые я хочу заменить, имеют те же имена классов. Как я могу заменить промежутки (на кнопки), если они содержат либо «яблоко», либо «банан», но другие промежутки с «апельсином» или «киви» я не хочу выбирать?

От:

<span class=>
"kiwi"
</span>

<span class=>
"apple"
</span>

<span class=>
"orange"
</span>

<span class=>
"banana"
</span>

К:

<button>
"apple"
</button>

<button>
"banana"
</button>

Код:

function replaceElement (source, tagname) {
    var range = document.createRange();
    var element = document.createElement(tagname);
    range.selectNodeContents(source);
    element.appendChild(range.extractContents());
    source.parentNode.replaceChild(element, source);
  }

var spans = document.querySelectorAll('span'), i;
for (i = 0; i < spans.length; ++i) {
  replaceElement(document.querySelector('span'), 'button');
}