html页面

Question

我使用jquery在HTML中工作。

我想制作一个网页，一次突出显示该页面中的一些文字行（第15,22,32行）。这可以通过在鼠标中单击鼠标左键并拖动该行来完成，以便选择带有蓝色背景的文本行。

我可以使用jquery，

获取如下所选行

    function getText() {
        var text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        console.log('text-----------'+text)
    }

当我点击其他行时，第一个选定的行消失了。我也需要这条线。 （在MSword中，我们可以按住ctrl并拖动线条，它将可用）

对于多项选择，我知道网络上有更多可用的插件。但我正在寻找使用Javascript或jquery进行此选择。

这是我在页面中要做的事情，想要选择文本并在我的javascript函数中获取它们。

我们怎么可能这样做？

Answer 1

这个答案结合了一些问题。

1. 获取选择文字
2. 标记它。
3. 复制到剪贴板

这不是完整的解决方案，但有所有部分。

所以：

var app = angular.module('testapp', []);

app.controller('appCtrl', ['$scope', function($scope) {
    $scope.noZero = function(e) {
      var kc = e.keyCode || e.which;
      if (String.fromCharCode(e.which) == '0' && e.target.value.indexOf('0') == 0) {
        return e.target.value = e.target.value.slice(0, -1);
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<div ng-app='testapp' ng-controller='appCtrl'>
  <input type='number' ng-keyup='noZero($event)'>
</div>

var output = '';
$('#test').mouseup(function () {
    output += getSelectedText();
    highlightSelected();
    copyOutput();
    $('#result').html(output);
});

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

function highlightSelected() {
    var SelRange;
    if (window.getSelection) {
        SelRange = window.getSelection().getRangeAt(0);
    } else if (document.getSelection) {
        SelRange = document.getSelection().getRangeAt(0);
    } else if (document.selection) {
        SelRange = document.selection.createRange();
    }

    if (SelRange.pasteHTML) {
        SelRange.pasteHTML('<span class="hilited1">' + SelRange.text + '</span>');
    }
    else {
        var newNode = $('<span class="hilited1" />')[0];
        SelRange.surroundContents(newNode);
    }
}

function copyOutput() {
    var emailLink = document.querySelector('#result');
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);

    try {
        var successful = document.execCommand('copy');
    } catch (err) {
        console.log('Oops, unable to copy');
    }

    window.getSelection().removeAllRanges();
}