Question

我希望用按钮替换某些特定的范围，并且希望替换的范围具有相同的类名。如果它们包含“ 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>

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

1 个答案: