使用计划字符串开始索引和结束索引查找 html 字符串索引答案

【问题标题】：Finding html string index using plan string start index and end end index使用计划字符串开始索引和结束索引查找 html 字符串索引
【发布时间】：2021-04-19 01:56:58
【问题描述】：

我有一个 html 文本字符串，还有它的文本形式的开始索引和结束索引（没有 HTML）。喜欢-

var htmlstr = "<b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure <i>dolor</i> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, <span>sunt in culpa qui officia deserunt</span> mollit anim id est laborum."
var startindex = 0; // can be change
var endindex = 123; // can be change

/* Text form (0 to 123) without html tag
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
*/

谁能建议我们如何为 htmlstr 找到相同的索引？

预期结果：-

在 htmlstring 中，索引将为 130。

/*
   "<b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
*/

【问题讨论】：

请检查答案并接受。或者，留下评论以拒绝。
@GyuHyeonChoi 谢谢，现在我明白了；我该如何解决或解决这个问题。

标签： javascript jquery angularjs

【解决方案1】：

let span = document.createElement('span');
span.innerHTML = htmlstr;

setTimeout(function() {  // wait for `span` to be rendered
    let target = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    let [i, j] = [0, 0];
    for (let child of span.childNodes) {
        let rest = target.substring(j);
        if (rest.startsWith(child.textContent)) {
            if (child.nodeType === Node.TEXT_NODE)
                i += child.textContent.length;
            else
                i += child.outerHTML.length;
            j += child.textContent.length;
        } else if (child.textContent.startsWith(rest)) {
            i += rest.length;
            if (child.nodeType !== Node.TEXT_NODE)
                i += child.outerHTML.indexOf('>') + 1;
            break;
        }
    }
    console.log(i);
}, 1000);

htmlstr 将被渲染为 DOM 元素。然后每个元素都有outerHTML 和textContent。

对于每一步，我们可以决定哪个子节点和target startsWith 的其余部分。如果 textContent 的子节点 startsWith 剩下的 target 文本，则完成。

所以，如果target文本startsWithtextContent子节点，索引将增加outerHTML的长度或textContent的长度。

在特殊情况下，如果target 文本在非TEXT_NODE 元素内结束，则索引将增加textContent 的长度加上开始标记的长度。

【讨论】：