Javascript находит строки без тегов элементов

Я пытаюсь получить строки из HTML тела , которая имеет элементы " функцию MYFUNCTION () { вар е = документ . GetElementById ( "t1" ); вар strUser = е . Варианты [ е . SelectedIndex ]. Значение ; вар я ; для ( I = 0 ; я < strUser . длины ; я ++) { вар список = документ . getElementsByTagName ( "SUP" ); } var y ; for ( y = 0 ; y < list . length ; y ++) { if ( list [ y ]. innerHTML . indexOf ( strUser ) ! == - 1 ) { $ ( list [ y ]). addClass ( "test" ); } } } function myFunctionr () { var e = document . getElementById ( "t1" ); var strUser = e . опции [ e . selectedIndex ]. ценность ; var i ; for ( i = 0 ; i < strUser . length ; i ++) { var list = document . getElementsByTagName ( "SUB" ); } var y ; for ( y = 0 ; y < list . length ; y ++) { if ( list [ y ]. innerHTML . indexOf ( strUser ) ! == - 1 ) { $ ( list [ y ]). addClass ( "test" ); } } } erscript и . test { / * border: 3px inset red; * / background : red ; color : white } # mydiv { background : # 000 ; } script. Пока что я могу получить эти теги. Но я также хочу иметь возможность находить строки / символы, которые не имеют <script src = "https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js " > </ script> <div> <sup> & reg; </ sup> <sup> & reg; </ sup> <sup> & reg; </ sup> <sub> & reg; </ sub> <sub> & reg; </ sub> <sub> & reg; </ sub> <sub> & trade; </ sub> <sup> & trade; </ sup> <sup> & trade; </ sup> & reg; </ div> <select id = "t1" > <option value = "& trade;" > & trade; </ option> <option value = "& reg;" > & reg; </ option> </ select> </ br> </ br> <button onclick = " myFunction () " > Поиск надписей </ button> <button onclick = " myFunctionr () " > Поиск подстроки </ button> / sup tags. Как я могу найти строки без прикрепленных тэгов Пожалуйста, помогите. Мой код ниже:

sub
const nodeIterator = document.createNodeIterator(document.querySelector('#container'), NodeFilter.SHOW_TEXT, { acceptNode: (node) =>
node.data.trim().length === 0 ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT});

let node;
while ((node = nodeIterator.nextNode())) {
  const container = node.parentElement;
  if (['SUP', 'SUB'].indexOf(container.nodeName) === -1 && !container.closest('SUP, SUB')) {
    console.log('text not in a tag for', node.data);
  }
}
<div id="container">
  <sup>&reg;</sup>
  <span>not in a tag</span>
</div>

javascript,jquery,html,

0

Ответов: 2


0

Это может быть выполнено путем итерации через все текстовые узлы, а затем поиск их родителей для поиска supили subтега. См. Пример ниже:

sub
sup

Вышеприведенный фрагмент ищет все непустые текстовые строки, а затем ищет их родительские элементы для элемента subили sup. Если нет, консоль регистрирует его. Вы можете настроить логику фильтрации по мере необходимости, чтобы искать точные сценарии, которые вы хотите.


0

JQuery :contains() Selectorмог сделать магию: https://api.jquery.com/contains-selector/

Я не знаю, как использовать фрагмент кода, но вы можете найти мой jsfiddle: https://jsfiddle.net/dongdongdong/zfr0kd6t/

Я добавил выбранный html:

<select id="t0">
    <option value="#container">All</option>
    <option value="sup">SUP</option>
    <option value="sub" >SUB</option>
</select>

о js part, основной код:

$("xxx:contains('xxxx')").highlight(text, "test");

вот код js

jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "g");

    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class="" + className + "">" + matched + "</span>";});
    });
}; 

$('#search').click(function() {
  $('.test').removeClass('test');
  var text = $('#t1').val();
  $($('#t0').val()+":contains('"+text+"')").highlight(text, "test");
});
JavaScript, JQuery, HTML,
Похожие вопросы