CODEWITHSUNDEEP
javascripthtmldom
somebody4
somebody4

Reputation: 515

js, get element from text-offset/text-position?

I am trying to parse and reformat some web page.

The text is well formatted but the DOM structure is not (generated from WYSIWYG editor).

Thus I would like to parse the text content, then find back corresponding element(s) of each portions of the text.

example problem:

//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?

I know one way is to loop through all child elements of #a, then subtract each text length until 0.

But are there better way?

Upvotes: 1

Views: 864

Answers (2)

Bhagwan Komalram
Bhagwan Komalram

Reputation: 1

Well I think the question is alittle confusing but as I undestoood you you want the text of the elements as they are nested you should loop them. As you comment at the question text. I leave you a fragment of a loop with no lenght evaluation:

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)

I hope this could help. Regards

Upvotes: 0

Andam
Andam

Reputation: 2167

From what I understood from you is that you want to find parent element of the text that you search for. So instead of looping through all the text we will use indexOf search term and then backtrack to get first tag after that we will forward search to get closing tag and return this part of string between first tag and last tag

Another way is to backtrack to find first id= instead of first html tag but Im not sure if all you elements have id attribute

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

Upvotes: 1

Related Questions