如何替换包含选定标签的特定标签

Question

我希望用按钮替换一些特定的 span，并且我希望替换的 span 具有相同的类名。如果它们包含“apple”或“banana”中的任何一个，但我不想选择其他带有“orange”或“kiwi”的跨度，我该如何替换它们？

发件人：

<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');
}

Answer 1

您不能根据内部文本选择元素。但是您可以做的是，您可以根据其内部文本内容过滤 span 元素。

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) {
  if(spans[i].textContent.match('apple') ||spans[i].textContent.match('banana') ){
  replaceElement(spans[i], 'button');
  }
}

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

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

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

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