如何更快速，更智能地突出显示单词/术语？ [英] How can I highlight a word/term quicker and smarter?

问题描述

我有一些文字：

<p class="drag">Hello world, Attack on Titan season two!</p>

目前，如果用户想要用光标突出显示单词/术语，他们会点击并拖动， 逐个字母。

Currently, if a user wants to highlight a word/term with the cursor, they will click and drag, letter by letter.

我希望这个过程更快。例如，如果用户开始突出显示 At ，则应自动突出显示单词的其余部分 Attack 。所以空白区域是分隔线。

I want this process to be quicker. For example, if the user starts to highlight At, it should auto highlight the rest of the word, Attack. So the empty space is the divider.

我知道这可以通过将单词划分为div来实现，但我希望在一个< p>中使用纯文本的解决方案。 tag。

I am aware this is possible by dividing the words into divs, but I am hoping for a solution with pure text within one <p> tag.

推荐答案

你可以使用 Range <纯JS来做到这一点/ code>和 selectionRange 对象。

HTML：

<div id="selectable">
  <p>Hello world, <b>Attack on Titan</b> season two!</p>
  <p>Another paragraph with sample text.</p>
</div>
<div id="notSelectable">
  <p>The selection will behave normally on this div.</p>
</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'));

请查看工作示例在这里。

更新：

• 点击添加全字选择


• 修复Firefox特定拖动
  添加行为

更新了JSFiddle 此处。

Updated JSFiddle here.

这篇关于如何更快速，更智能地突出显示单词/术语？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！