How can I highlight a word/term quicker and smarter?

后端 未结 6 761
误落风尘
误落风尘 2021-02-05 06:27

I have some text:

Hello world, Attack on Titan season two!

Currently, if a user wants to highlight a word/ter

6条回答
  •  心在旅途
    2021-02-05 06:52

    You can do that with pure JS using Range and selectionRange objects.

    HTML:

    Hello world, Attack on Titan season two!

    Another paragraph with sample text.

    The selection will behave normally on this div.

    JS:

    (function(el){
        el.addEventListener('mouseup',function(evt){
            if (document.createRange) { // Works on all browsers, including IE 9+
                var selected = window.getSelection();
                /* if(selected.toString().length){ */
                    var d = document,
                        nA = selected.anchorNode,
                        oA = selected.anchorOffset,
                        nF = selected.focusNode,
                        oF = selected.focusOffset,
                        range = d.createRange();
    
                    range.setStart(nA,oA);
                    range.setEnd(nF,oF);
    
                    // Check if direction of selection is right to left
                    if(range.startContainer !== nA || (nA === nF && oF < oA)){
                        range.setStart(nF,oF);
                        range.setEnd(nA,oA);
                    }
    
                    // Extend range to the next space or end of node
                    while(range.endOffset < range.endContainer.textContent.length && !/\s$/.test(range.toString())){
                        range.setEnd(range.endContainer, range.endOffset + 1);
                    }
                    // Extend range to the previous space or start of node
                    while(range.startOffset > 0 && !/^\s/.test(range.toString())){
                        range.setStart(range.startContainer, range.startOffset - 1);
                    }
    
                    // Remove spaces
                    if(/\s$/.test(range.toString()) && range.endOffset > 0)
                        range.setEnd(range.endContainer, range.endOffset - 1);
                    if(/^\s/.test(range.toString()))
                        range.setStart(range.startContainer, range.startOffset + 1);
    
                    // Assign range to selection
                    selected.addRange(range);
                /* } */
            } else { 
               // Fallback for Internet Explorer 8 and earlier
               // (if you think it still is worth the effort of course)
            }
    
            // Stop Moz user select
            el.style.MozUserSelect = '-moz-none';
        });
    
        /* This part is added to eliminate a FF specific dragging behavior */
        el.addEventListener('mousedown',function(){
            if (window.getSelection) {  // Works on all browsers, including IE 9+
               var selection = window.getSelection ();
               selection.collapse (selection.anchorNode, selection.anchorOffset);
            } else {
               // Fallback for Internet Explorer 8 and earlier
               // (if you think it still is worth the effort of course)
            }
    
            // Add Moz user select back
            el.style.MozUserSelect = 'text';
        });
    })(document.getElementById('selectable'));
    

    Please check the working example here.

    UPDATES:

    • Whole word selection on click added
    • Fix for Firefox specific drag behavior added

    Updated JSFiddle here.

提交回复
热议问题