映射文本和 html。职位搜索

Question

我有文本，这个文本带有 html

从前，有一个非常富有的人，和他的三个女儿住在一起。两个年长的女儿会嘲笑没有穿得像她们那样漂亮的人。如果他们两个不在家休息，他们就会出去购买尽可能多的精美衣服和帽子。

<span>
    <div style="font-family:Calibri,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)">
        <p class="p1" style="margin: 0px; font: 17px; font-family: Helvetica Neue"><b>Once upon a time there was
                a
                very rich man who <span style="color: blue">lived</span> with his three daughters.<span class="Apple-converted-space">&nbsp;
                </span>The two older daughters laughed at anyone who di<span style="color: orange">d n</span>ot dress <span style="color: green">as</span> wel as they did.<span
                    class="Apple-converted-space">&nbsp; </span>If the two of them were not resting at home,
                they were out shopping for as many fine dresses and hats as they could <span style="color: red">carry</span> home. <span
                    class="Apple-converted-space">&nbsp;</span></b></p><br>
    </div>
    <div style="font-family:Calibri,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)">
    </div>
</span>

需要一个通用的解决方案来查找从文本到 html 的单词/短语的位置。问题是单词/短语中可能有一些风格

di<span style="color: orange">d n</span>ot

尝试使用 Levenshtein 距离来监听班次，但这是一个非常“难”的解决方案

Answer 1

let html = document.getElementById('input').innerHTML;
let word = 'did not';

console.log(searchPositions(html, word));

function searchPositions(html, issueText) {
    let htmlArr = Array.from(html).map((item, index) => {
        return {
            item,
            index
        }
    });

    const regexp = /<\/?[^>]+(>|$)/g;
    const tags = html.match(regexp) || [];
    const textTrue = html.replace(/<\/?[^>]+(>|$)/g, '');

    let inTextStartPosition = textTrue.indexOf(issueText);
    let inTextEndPosition = inTextStartPosition + issueText.length - 1;

    let matches = [...html.matchAll(regexp)];
    let tagsIndexs = matches.map((item) => {
        return item.index;
    });

    let tagsInfo = tags.map((item, index) => {
        let length = item.length;
        let startPosition = tagsIndexs[index];
        let endPosition = startPosition + length;

        return {
            startPosition,
            endPosition,
            length
        }
    })

    for (let ii = 0; ii < tagsInfo.length; ii++) {
        let startPosition = tagsInfo[ii].startPosition;
        let endPosition = tagsInfo[ii].endPosition;

        while (startPosition !== endPosition) {
            htmlArr = htmlArr.filter(x => x.index !== startPosition);
            startPosition++;
        }
    }

    let start = htmlArr[inTextStartPosition].index;
    let end = htmlArr[inTextEndPosition].index;

    return {
        start,
        end
    }
}

<div id='input'>
        <span>
            <div style="font-family:Calibri,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)">
                <p class="p1" style="margin: 0px; font: 17px; font-family: Helvetica Neue"><b>Once upon a time there was
                        a
                        very rich man who <span style="color: blue">lived</span> with his three daughters.<span
                            class="Apple-converted-space">&nbsp;
                        </span>The two older daughters laughed at anyone who di<span style="color: orange">d n</span>ot
                        dress <span style="color: green">as</span> wel as they did.<span
                            class="Apple-converted-space">&nbsp; </span>If the two of them were not resting at home,
                        they were out shopping for as many fine dresses and hats as they could <span
                            style="color: red">carry</span> home. <span class="Apple-converted-space">&nbsp;</span></b>
                </p><br>
            </div>
            <div style="font-family:Calibri,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)">
            </div>
        </span>
    </div>