Извлечение текстовой строки из диапазона HTML, если соблюдены другие критерии тега

0

Я загружаю веб-страницу через java-скрипт с намерением вытащить одно строковое значение из исходного кода HTML-кода для использования в другом месте в моем скрипте. Таким образом, на веб-сайте есть несколько контейнеров строк, которые следуют этому базовому формату:

<tr>

<td align="left">     
<span class="criteria1">      
<script>document.write("INFO I WANT");</script>INFO I WANT        
</span>
</td>

<td align="left"><a href="http://www.example.com/1234/" title="Directory Criteria 1234">1234</a>        
</td>

<td align="left">         
<div class="criteria2" data-value="100" title="1642"></div>       
</td>

<td align="left">   
<span class="criteria3" style="font-weight:bold; font-size:10px;">North</span> 
</td>

</tr>

На сайте есть многие из этих контейнеров строк, которые меня не интересуют, и некоторые из них, которые меня интересуют. Поэтому я хочу проверить каждый контейнер контейнеров, чтобы увидеть, соответствуют ли следующие критерии (они приведены в моем примере выше):

  1. Должен быть элемент span с классом = "criteria1"
  2. Должен быть якорный тег с "1234" где-то в заголовке = значение атрибута
  3. Должен существовать элемент div с классом = "критерии2" И data-value = "100"
  4. Должен быть другой элемент span с классом = "критерии3" и "Север" в любом поле, которое вы видите в моем примере

Если эти критерии выполнены, я хочу вытащить строку "INFO я WANT" и сохранить ее в переменной в моем скрипте. Мы могли бы вытащить это из тегов сценариев или из того места, где оно появляется после тега... что это будет, содержимое innerHTML этого конкретного тега span?

Поскольку вы собрались с этого момента, я новичок в javascript, поэтому заранее извиняюсь, если любое из этого глупо, легко и/или неясно. Я много сделал для того, чтобы попытаться выяснить, как это сделать, но после полутора дней тестирования с небольшим успехом я достиг своего разрыва. Очевидно, что для каждого контейнера потребуется цикл, а затем (я угадываю) использую методы getElementsBy для проверки критериев.

Прошу прощения за отсутствие формального обучения/словарного запаса и заранее за помощь. Просто троллинг StackOverflow, вы все уже помогли мне БОЛЬШУЮ сделку в других проектах! И, пожалуйста, во что бы то ни стало, исправить любое злоупотребление терминологией выше. Знание правильного способа выражения этих идей поможет мне в будущих исследованиях найти ответы на мои вопросы.

  • 0
    Сложные запросы DOM - это именно то, для чего был создан jQuery. Вы можете использовать jQuery или вам нужен ванильный Javascript?
  • 0
    @blurd, возможно, jquery будет самым простым и понятным подходом, хотя я не особенно знаком с ним. Я собираюсь рассмотреть ваше предложение ниже и провести некоторое тестирование. Это выглядит многообещающе. Спасибо за быстрый (и тщательный) отзыв. Я доложу ...
Теги:
tags
dom

1 ответ

0

Это не полное решение, но оно должно установить вас на правильном пути. Изолируйте каждый из критериев на метод, с которым вы можете передать строку. Таким образом, вы можете легко изменить критерии позже.

// get all rows
var trs = document.getElementsByTagName('tr'),
  currentRow,
  i = 0;

for (; i < trs.length; i++) {
  currentRow = trs[i];

  if (hasClassCriteria1(currentRow)) {
    if (hasAnchorWithTitle(currentRow)) {
      if (hasDivWithCriteria2(currentRow)) {
        console.log('continue checks until you find what you want...');
      }
    }
  }
}



// There must be a span element with class="criteria1"
function hasClassCriteria1 (row) {
  var spans = row.getElementsByTagName('span'),
    i;

  // Do any of these spans have the class "criteria1"?
  for (i = 0; i < spans.length; i++) {
    matched = spans[i].classList.contains('criteria1');
    if (matched) {
      return true;
    }
  }
}

// There must be a an anchor tag with "1234" somewhere in the title= attribute value
function hasAnchorWithTitle (row) {
  var a = row.getElementsByTagName('a'),
    i;
  for (i = 0; i < a.length; i++) {
    if (/1234/.test(a[i].getAttribute('title'))) {
      return true;
    }
  }
}

// There must be a div element with class="criteria2" AND data-value="100"
function hasDivWithCriteria2 (row) {
  var divs = row.getElementsByTagName('div'),
    i;

  for (i = 0; i < divs.length; i++) {
    if (divs[i].classList.contains('criteria2')) {
      if (divs[i].getAttribute('data-value') == 100) {
        return true;
      }
    }
  }
}

с jQuery

Если вы можете использовать jQuery, селектора будут очень легкими и выразительными.

// There must be a span element with class="criteria1"
tr = tr.has('span.criteria1');

// There must be a an anchor tag with "1234" somewhere in the title= attribute value
tr = tr.has('a[title*="1234"]');

// There must be a div element with class="criteria2" AND data-value="100"
tr = tr.has('div.criteria2[data-value="100"]');

// There must be another span element with class="criteria3" and "North" in whatever field you see it in my example
return $('span.criteria3', tr).html() === 'North';

Вы можете увидеть полный пример здесь. Он находит все строки, которые соответствуют вашим критериям, затем пересекает их, предупреждая о том, какое значение вы ищете.

jQuery - ваш друг. Существует тонна документации, и ее легко начать. Не изобретайте велосипед, если только вы не пытаетесь учиться.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню