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

Answer 2

好吧，我认为这个问题有点令人困惑，但是当我不了解您时，您希望元素嵌套的文本，您应该循环它们。当您对问题文本发表评论时。我给你留下一个没有长度评估的循环片段：

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)

我希望这能有所帮助。 问候