如何替换包含选定标签的特定标签 [英] How to replace specific tags that contains selected labels

问题描述

我想用按钮替换一些特定的跨度，我想替换的跨度具有相同的类名.如果跨度包含苹果"或香蕉"，但我不想选择其他包含橙色"或猕猴桃"的跨度，我该如何替换(到按钮)?

I wish to replace some specific spans with buttons, and the spans that I wish to replace has the same class names. How could I replace the spans (to buttons) if they contains either of "apple" or "banana", but other spans with "orange" or "kiwi" I don't want to select?

来自:

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

推荐答案

您无法根据内部文本选择元素.但是您可以做的是，您可以根据其内部文本内容过滤 span 元素.

You can't select an element based on the inner text. But what you can do is that you can filter the span element based on its inner text content.

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>

这篇关于如何替换包含选定标签的特定标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！