Javascript 浏览器内文本的交互式选择高亮显示

我需要的是通过Javascript在浏览器中交互选择突出显示文本

更具体地说，假设我在

div

元素中有一堆文本，如下所示：

<div>The quick brown fox jumps over the lazy dog ... </div>

敏捷的棕色狐狸跳过了懒狗。。。 现在我想做的是选择文本的某个范围并突出显示它（即“棕色狐狸”）。我已经通过使用

rangy.js

实现了这一点

现在，我真的想让这个选择/高亮显示更具交互性，这样用户就可以抓住选择的开始或结束（使用某种手柄），并通过将当前选择的开始或结束拖动到新的开始或结束点，以交互方式调整选择的大小

我试图用谷歌搜索这个，但什么也找不到。更糟糕的是，我完全不知道应该如何开始实现这样的东西

也许有人能给我指出正确的方向，或者更好的是，他已经对如何开始实施类似的东西有了一些想法

非常感谢您的帮助……

试试看

html

js

清晰的选择

这个问题相当复杂，并且由于不同浏览器之间缺乏一致性而受到阻碍。然而，我在这个问题上做了尝试，取得了一定程度的成功

我不保证这在所有情况下都有效，到目前为止，我的测试仅限于文本。还有一些问题需要解决，我将在不久的将来解决。然而，我认为它已经准备好在这里发布了

方法论 这个问题可以分为几个步骤。首先，我们需要在用户的选择周围插入标记。这并不太难，尽管有几个设计决策必须解决。经过一些实验，我决定在标记位置直接将跨距插入文档中；这样，在这些标记之间选择内容就更容易了。下面是插入标记的方法

function insertMarker (isBefore) {
    var range;
    
    if (window.getSelection) {
        // IE9+ and non-IE
        var sel = window.getSelection();
        
        if (sel.getRangeAt) {
            range = window.getSelection().getRangeAt(0);
            range.collapse(isBefore);
        }
    } else if (document.selection && document.selection.createRange) {
        // IE < 9
        range = document.selection.createRange();
        range.collapse(isBefore);
    }
    
    // Create the marker element and insert it into the DOM.
    if (range) {
        range.insertNode(createMarker(isBefore));
    }
}

---

听起来您想在桌面浏览器中重现移动式高亮显示。我说的对吗？我不知道你所说的“移动风格突出显示”是什么意思，但如果它的行为与上述完全相同，那么是的。例如，当你在Android中突出显示一个文本字符串时，你会在选择的任一侧获得句柄，你可以拖动它来修改现有的选择。它可能会为您提供一个提示，作为寻找答案的方向，因为开发人员已经在其他平台上清楚地解决了这个问题，所以您可能希望从这里开始。是否有JS库是另一回事。这里是谷歌图片搜索嗨，首先非常感谢你的输入。可悲的是，这不是我真正想的。我正在寻找一种方法来调整选择本身的大小，而不是显示所选元素的单独文本区域。上面robabby的最后一句话概括了我正在寻找的东西。下面是它的外观说明。@evermean Resize selected

element
、
font size
，或两者兼而有之？我不在乎字体大小，我需要选择文本的某个部分，然后能够调整此选择的大小（…完全如上面链接的图片所示）。通过调整大小，仅调整
元素的大小
内容框？i、 例如，与上面的Dragable元素相同或相似，但在选择点向选择添加可调整大小的“句柄”？这就是它应该如何工作的。相关部分在0:30开始。。。希望这有助于澄清这一点。
#selectable .ui-selecting {
  background: #FECA40;
}
#selectable .ui-selected {
  background: #F39814;
  color: white;
}
#selections {
  width: 100%;
  height: 400px;
}
#clear {
  position: relative;
  left: calc(37%);
}
.selected {
  width: 150px;
  height: 150px;
  overflow: hidden;
}
.selected,
.text {
  display: block;
  background-color: rgb(225, 225, 225);
}
.ui-widget-content {
  border: 1px dotted rgba(170, 170, 170, .25);
}
.ui-widget-conent span {
  display: inline-block;
  padding: 4px;
  margin: 4px;
}

  var selectable = $("#selectable") // selectable words
  , selections = $("#selections") // selected words container parent
  , selected = $(".selected") // selected words container
  , clear = $("#clear") // clear all
  , sel = ".ui-selected" // selected word
  , content = ".ui-widget-content" // selectable words element `class`
  , text = ".text" // selected words draggable, resizable container `class`
  , handles = {} // resize handles
  , str = "The quick brown fox jumps over the lazy dog ..." // text, `string`
    // split `str`, return array of words
  , words = str.split(" ").map(function(word, i) {
      $("<span />", {
        "class": content.slice(1),
        "text": word,
        "css": {
          "margin": "2px"
        }
      }).appendTo(selectable)
    });
  // append `handles` to `text` container
  $.each(["nw", "ne", "sw", "se"], function(_, handle) {
    var elem = $("<div />", {
        "class": "ui-resizable-handle ui-resizable-" + handle,
        "css": {
          "width": "calc(12px + 5%)",
          "height": "calc(12px + 5%)",
          "border-radius": "50%",
          "background": "#000"
        }
      })
      .appendTo(selected)
      .parent().find(":last")
      .css({
        "right": "-5px",
        "bottom": "-5px"
      });
    handles[handle] = elem[0];
  });
  // `selected` settings
  // set `selected` `display` to `none`
  selected
  .hide(0)
  .resizable({
      handles: handles
  })
  .draggable({
      containment: "parent"
  });
  // collect selected words at `selectable.data("selections", [])` array,
  // append words to `text`,
  // append `text` to `selected`,
  // set `selected` `display` to `block`
  selectable.data("selections", [])
    .selectable({
      selected: function(event, ui) {
        $(this).data("selections").push($(ui.selected).text())
      },
      stop: function() {
        selected
          .find(".text")
          .remove()
          .addBack()
          .prepend(
            $("<div />", {
              "class": "text",
              "text": $(this).data("selections").join(" "),
              "css": {
                "position": "relative",
                "display": "block",
                "padding": "calc(15%)",
                "height": "calc(50%)",
                "white-space": "pre-line",
                "overflow": "hidden"
              }
            })
          ).show(0)
      }
    });
  // remove selected words from `selectable.data("selections", [])` array,
  // remove `sel` `class` from `selectable` words,
  // remove `text`,
  // set `selected` display to `none`
  clear.on("click", function(e) {
    selectable.data("selections", [])
      .find(sel).removeClass(sel.slice(1));
    selections.find(text).remove()
      .addBack().find(selected).hide(0)
  });

function insertMarker (isBefore) {
    var range;
    
    if (window.getSelection) {
        // IE9+ and non-IE
        var sel = window.getSelection();
        
        if (sel.getRangeAt) {
            range = window.getSelection().getRangeAt(0);
            range.collapse(isBefore);
        }
    } else if (document.selection && document.selection.createRange) {
        // IE < 9
        range = document.selection.createRange();
        range.collapse(isBefore);
    }
    
    // Create the marker element and insert it into the DOM.
    if (range) {
        range.insertNode(createMarker(isBefore));
    }
}

function selectSelection () {
    if (window.getSelection) {
        // IE9+ and non-IE
        var sel = window.getSelection();
        var range = document.createRange();
        range.setStartAfter($(".marker").get(0));
        range.setEndBefore($(".marker").get(1));
        sel.removeAllRanges();
        sel.addRange(range);
    }
    else if (document.selection && document.selection.createRange) {
        // IE < 9
        var range = document.selection.createRange();
        range.setStartAfter($(".marker").get(0));
        range.setEndBefore($(".marker").get(1));
    }
}