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

Question

我希望用按钮替换一些特定的跨度，并且我希望替换的跨度具有相同的类名。如果跨度包含“苹果”或“香蕉”，但我不想选择其他带有“橙色”或“猕猴桃”的跨度，我该如何替换跨度(按钮)？

来自:

<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>