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

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

0 голосов
/ 16 декабря 2018

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

Из:

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

1 Ответ

0 голосов
/ 16 декабря 2018

Вы не можете выбрать элемент на основе внутреннего текста.Но вы можете фильтровать элемент 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>
...