js, получить элемент из text-offset / text-position?

Question

Я пытаюсь проанализировать и переформатировать некоторую веб-страницу.

Текст хорошо отформатирован, но структура DOM отсутствует (сгенерирована из редактора WYSIWYG).

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

пример задачи:

//example.html
<div id="a">
  ABC
  <span id="b">
    DEF
    <span id="c">
      GHI
    </span>
    <span id="d">
      JKR
    </span>
  </span>
</div>

//script.js

let a = document.getElementById('a');
let text_pos=a.textContent.indexOf('J');
// good way to get element #d from text_pos? 

Я знаю, что один способ - это l oop через все дочерние элементы #a, а затем вычитать каждую длину текста до 0.

Но есть ли лучший способ?

Answer 1

Из того, что я понял от вас, вы хотите найти родительский элемент текста, который вы ищете. Таким образом, вместо того, чтобы перебирать весь текст, мы будем использовать поисковый термин indexOf, а затем возвращаться назад, чтобы получить первый тег, после чего мы будем перенаправлять поиск, чтобы получить закрывающий тег и вернуть эту часть строки между первым тегом и последним тегом

Другой Можно вернуться назад, чтобы найти первый id = вместо первого тега html, но я не уверен, что все ваши элементы имеют атрибут id

var data = "<div>Data<div id='d'><br/>AB</div></div>";
console.log(getparentElementOf("AB", data))

function getparentElementOf(searchTerm, data){
  var indexOfTerm = data.indexOf(searchTerm);
  var indexOfFirstTag = getStartIndexOfParentTag(indexOfTerm);
  var indexOfEndTag = getEndIndexOfParentTag(indexOfTerm + searchTerm.length, data.length);
  
  var element = data.substr(0, indexOfEndTag +1);
  element = data.substring(indexOfFirstTag, element.length);
  return element;
}

function getStartIndexOfParentTag(startFromIndex){
  var indexOfFirstTag = -1;
  var flagClosingBracket = false, flagOpeningBracket = false;
  
  // back track from that found position until you find the first tag
  for(var i = startFromIndex; i >= 0; i--){
    
    // If we have detected closing bracket
    if(flagClosingBracket == true){
      // If we have / then cancel detected closing bracket
      if(data[i] == "/"){
        flagClosingBracket = false;
      }else if(data[i] == "<"){
        // otherwise we have found index of our first tage
        flagOpeningBracket = true;
        indexOfFirstTag = i;
        i = -1; // to exit loop
      }
    }else{
      // Otherwise detect closing bracket
      if(data[i] == ">"){
        flagClosingBracket = true;
      }
    }
  }
  
  return indexOfFirstTag;
}

function getEndIndexOfParentTag(startFromIndex, to){
  var indexOfFirstTag = -1;
  var flagClosingBracket = false, flagOpeningBracket = false, flagSlash = false;;
  
  // back track from that found position until you find the first tag
  for(var i = startFromIndex; i < to; i++){
    
    // If we have detected closing bracket
    if(flagOpeningBracket == true){
      // If we have / then cancel detected closing bracket
      if(data[i] == ">"){
        flagOpeningBracket = false;
      }else if(data[i] == "/"){
        // otherwise we have found index of our first tage
        flagSlash = true;
      }
    }else{
      // Otherwise detect closing bracket
      if(data[i] == "<"){
        flagOpeningBracket = true;
      }
    }
    
    if(flagSlash == true)
    {
      if(data[i] == ">"){
        flagClosingBracket = true;
        indexOfFirstTag = i;
        i = to; // to exit loop
      }
    }
  }
  
  return indexOfFirstTag;
}

Answer 2

Ну, я думаю, что вопрос немного сбивает с толку, но, как я вас понял, вы хотите, чтобы текст элементов располагался так, как они вложены, вы должны l oop их. Как вы прокомментируете текст вопроса. Я оставляю вам фрагмент al oop без оценки длины:

var strResult = ""; 
let a = document.getElementById('a');
for(content_word in a.textContent.trim().split("\n")) { 
  var isaWord = /[aA-zZ]/.test(a.textContent.trim().split("\n")[content_word])
  if (isaWord) {
    strResult = strResult + a.textContent.trim().split("\n")[content_word].trim()
  }  
}; 
console.log(strResult)

Надеюсь, это могло бы помочь. Привет