如何在JavaScript中向後擴展選擇？

我正在使用提供按鈕來選擇文本而不是鼠標單擊和拖動的用戶界面。用戶得到一個文本框selection輸入將被選擇的文本，和一組按鈕：如何在JavaScript中向後擴展選擇？

用於使選擇
延伸選擇到下一個字
延伸選擇到前一個字

該代碼完美適用於上面的前兩個任務。向後擴展選擇正在工作，但不是我想要的方式。

期望的功能：
通道：這是一個例子。在這段文字中輸入一些文字到下面的輸入框，然後按選擇按鈕選擇它。
選擇：從這個
擴展選擇向後：（目前）從
擴展選擇向後：（應選擇）從此
文本即我想向後移動anchor一個字。我該如何實現它。

getSelectionText = function() { 
 
    sentence = document.getElementById("sentence"); 
 
    target = document.getElementById("target"); 
 
    selection = window.getSelection(); 
 
    range = document.createRange(); 
 
    index = sentence.innerHTML.indexOf(target.value); 
 
    range.setStart(sentence.firstChild, index); 
 
    range.setEnd(sentence.firstChild, (index + target.value.length)); 
 
    selection.removeAllRanges(); 
 
    selection.addRange(range); 
 
} 
 

 
removeSelection = function() { 
 
    selection = window.getSelection(); 
 
    selection.removeAllRanges(); 
 
} 
 

 
extendSelection = function(buttonId) { 
 
    var element = document.getElementById(buttonId); 
 
    if (element.id == "Previous") { 
 
    var selection = window.getSelection(); 
 
    selection.modify("extend", "left", "word"); 
 
    } else if (element.id == "Next") { 
 
    var selection = window.getSelection(); 
 
    selection.modify("extend", "right", "word"); 
 
    } 
 
}

<body> 
 
    <div id="sentence">This is an example. Enter some text from this passage to the input box below and then press the select button to select it. 
 
    </div> 
 
    </br> 
 
    <b> Selection: </b> 
 
    <input type="text" id="target" value="an example" /> 
 
    <br> 
 
    <br> 
 
    <input type="button" value="Select" onclick="getSelectionText()"> 
 
    <button type="button" value="Remove Selection" onclick="removeSelection()"> Remove Selection</button> 
 
    <button type="button" id="Previous" onclick="extendSelection('Previous')">Extend Selection 
 
    < Previous</button> 
 
    <button type="button" id="Next" onclick="extendSelection('Next')">Extend Selection > Next</button>

來源

2017-03-05 Imran Ali

不是很漂亮，但下面的解決方案爲我工作。下面的代碼片段包含一個附加方法previousWord，它將sentence轉換爲數組並返回選擇之前的字詞。按Move Selection將重置selection的開頭以包含前一個單詞，並重覆按下它也可以正常工作。

getSelectionText = function() { 
 
    sentence = document.getElementById("sentence"); 
 
    target = document.getElementById("target"); 
 
    selection = window.getSelection(); 
 
    range = document.createRange(); 
 
    index = sentence.innerHTML.indexOf(target.value); 
 
    range.setStart(sentence.firstChild, index); 
 
    range.setEnd(sentence.firstChild, (index + target.value.length)); 
 
    selection.removeAllRanges(); 
 
    selection.addRange(range); 
 
} 
 

 
removeSelection = function() { 
 
    selection = window.getSelection(); 
 
    selection.removeAllRanges(); 
 
} 
 

 
extendSelection = function(buttonId) { 
 
    var element = document.getElementById(buttonId); 
 
    if (element.id == "Previous") { 
 
    var selection = window.getSelection(); 
 
    selection.modify("extend", "left", "word"); 
 
    } else if (element.id == "Next") { 
 
    var selection = window.getSelection(); 
 
    selection.modify("extend", "right", "word"); 
 

 
    } else if (element.id == "Move") { 
 
    var selection = window.getSelection(); 
 
    range = document.createRange(); 
 
    target = " " + previousWord() + " "; 
 
    indexPW = sentence.innerHTML.indexOf(target); 
 
    range.setStart(sentence.firstChild, indexPW + 1); 
 
    range.setEnd(sentence.firstChild, (index + selection.toString().length)); 
 
    selection.removeAllRanges(); 
 
    selection.addRange(range); 
 
    } 
 
} 
 

 

 
previousWord = function() { 
 
    var pw = ""; 
 
    var sentence = document.getElementById("sentence").innerHTML; 
 
    var selection = window.getSelection(); 
 

 
    index = sentence.indexOf(selection); 
 

 
    var sentArray = sentence.split(" "); 
 

 
    var firstWord = selection.toString().split(" ")[0]; 
 

 
    var firstWordIndex = sentArray.indexOf(firstWord); 
 
    if (firstWordIndex >= 1) { 
 
    pw = sentArray[firstWordIndex - 1]; 
 
    } else { 
 
    pw = sentArray[0]; 
 
    } 
 
    return pw; 
 
}

<div id="sentence">This is an example. Select text chunk of any length and then press the button below.</div> 
 
</br> 
 
<b> Selection: </b> <input type="text" id="target" value="an example" /> 
 
<br> <br> 
 
<input type="button" value="Select" onclick="getSelectionText()"> 
 
<button type="button" value="Remove Selection" onclick="removeSelection()"> Remove Selection</button> 
 
<button type="button" id="Previous" onclick="extendSelection('Previous')">Undo Extend</button> 
 
<button type="button" id="Next" onclick="extendSelection('Next')">Extend Selection > Next</button> 
 
<button type="button" id="Move" onclick="extendSelection('Move')">Move Selection</button>

來源

2017-03-10 07:57:01

如何在JavaScript中向後擴展選擇？

回答

相關問題