如何找到DOM文本選擇的開始和結束索引？

在jQuery終端，我想添加一個API，將回傳選擇的指數。

示例HTML我有：

< div class="cmd"/span> style="width: 100%; --cursor-line:1; top: 0px;">
    < div class="cmd-wrapper" style=""> 
        <span class="cmd-prompt" style="visibility: visible; margin-left: 0px;">
            <span data-text=">&nbsp; ">/span>
                <span style="width: 2ch;">&gt;&nbsp;</span> 
            </span>/span>
        </span>/span>
        < div role="presentation" aria- hidden="true" class="cmd-end-line" > 
            <span data-text="H"> 
                <span>H</span>/span>
            </span>/span>
            <span data-text="e">/span>
                <span>e</span>/span>
            </span>/span>
            <span data-text="l">/span>
                <span>l</span>/span>
            </span>/span>
            <span data-text="l">/span>
                <span>l</span>/span>
            </span>/span>
            <span data-text="o">/span>
                <span>o</span>/span>
            </span>/span>
            <span data-text="&nbsp; ">
                <span>&nbsp;</span>
            </span>/span>
            <span data-text="W"> 
                <span>W</span>/span>
            </span>/span>
            <span data-text="o">/span>
                <span>o</span>/span>
            </span>/span>
            <span data-text="r"> 
                <span>r</span>/span>
            </span>/span>
            <span data-text="l">/span>
                <span>l</span>/span>
            </span>/span>
            <span data-text="d"> 
                <span>d</span> 
            </span>/span>
            <span data-text="&nbsp; ">
                <span>&nbsp;</span>
            </span>/span>
        </div>/span>
        < div class="cmd-cursor-line"/span> role="presentation" aria-hidden="true"> 
            <span>/span>
                <span data-text="x"> 
                    <span>x</span> 
                </span>/span>
                <span data-text="x">/span>
                    <span>x</span> 
                </span>/span>
                <span data-text="x">/span>
                    <span>x</span> 
                </span>/span>
                <span data-text="x">/span>
                    <span>x</span> 
                </span>/span>
                <span data-text="x">/span>
                    <span>x</span> 
                </span>/span>
            </span>/span>
            < span class="cmd-cursor" style="">/span>
                < span data-text="" class="end">
                    <span>&nbsp; <span> </span></span> 
                </span>/span>
            </span>/span>
            <span></span> 
        </div>/span>
    </div>/span>
    < textarea autocapitalize="off"/span> spellcheck="false"/span> tabindex="1" class="cmd-clipboard" data-cmd-prompt=">。 &nbsp;" style="></textarea> 
</div>/span>

這是在輸入 "Hello World xxxxx"，并使用https://jsonformatter.org/html-pretty-print

我的問題是，我應該怎樣做才能獲得選擇指數呢？

例如，我有一條這樣的命令：

> He|lo wor|d

我應該得到[2, 8]，如果選擇在這個范圍之外：例子

>|> > Hello| world

當>>>被提示時，我應該得到[0, 5]我不關心負數。我還應該處理當整個選擇在外面的情況

|>>>| Hello World

它應該回傳[0, 0]或null。

如何實作這樣的東西？注意：我只關心window.getSelection API，它是100%支持的，不需要愚蠢地支持 IE8。

uj5u.com熱心網友回復：

你想要的是類似于

var range = window.getSelection（）.getRangeAt（0）。
var start = range.startOffset;
var end = range.endOffset。

注意，這段代碼假定range.startContainer === range.endContainer（通常是這樣）。如果你想獲得開始和結束容器之間的文本/長度，你需要在它們之間遞回地遍歷DOM。還有一個問題是，DOM 中的文本長度與 HTML 中的文本長度不一樣（瀏覽器有時會添加空格和其他 HTML 元素）

你是對的。

如果你猜到我曾在Javascript中使用過大量的選擇，那你就太對了。在我看來，這是個噩夢。Tim Down寫了一個非常受歡迎的包，叫做Rangy，我非常推薦它。你應該檢查一下，看看它是否符合你正在做的事情的要求。

uj5u.com熱心網友回復：

我自己已經解決了這個問題：

var selection = window.getSelection()。 var start = $（selection.anchorNode）。 var end = $(selection.focusNode) 。 var before = start.closest(' 。 cmd [role="presentation"]').prevUntil('.cmd-prompt') 。 var count = 0; if (before.length > 1) { count = before.find('[data-text]').length。 } var s = start.closest('.cmd [role="presentation"] [data-text]') 。 var e = end.closest('.cmd [role="presentation"] [data-text]') 。 if ((s.length || e.length)) { start = count s.index（）。 end = count e.index() 1; console.log（{start, end}）。 }

標籤：

上一篇：當離開有元素的div時，FocusOut/Blur。

下一篇：Sharepoint：如何根據搜索關鍵詞過濾FAQ串列