js，从text-offset / text-position获取元素？

Question

我正在尝试解析和重新格式化某些网页。

文本格式正确，但DOM结构不正确（由WYSIWYG编辑器生成）。

因此，我想解析文本内容，然后查找文本各部分的对应元素。

示例问题：

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

//script.js

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

我知道一种方法是遍历#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;
}