javascript - js，从文本偏移/文本位置获取元素？

Question

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

文本格式良好，但 DOM 结构不是(从所见即所得编辑器生成)。

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

示例问题:

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

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