实时文字突出显示

Question

您好我是JavaScript的新手，试图为我的问题找到解决方案。 有没有什么方法可以像我们在PDF中一样突出显示我的文字？

这样的事情： Plunker

相关代码

<div class="box">
   llentesque volutpat tempus eleifend. Integer viverra erat ante. Aliquam    
   gravida ac nibh non sollicitudin.
 </div>

<button type="button">highlight</button>

我有一个按钮，允许/启用单击时突出显示文本。然后我拖动我的鼠标选择文本将获得黄色背景颜色。

这可能吗？任何例子都会有所帮助。 谢谢

演示

＆＃13;

＆＃13;

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) { });

＆＃13;

.box span {
  background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="MainCtrl">
  <div class="box">llentesque volutpat tempus eleifend. Integer viverra erat ante. Aliquam gravida ac nibh non sollicitudin.</div>
  <button type="button">highlight</button>
  <div class="box" style="margin-top:100px">
    DEMO:
    <br>llentesque volutpat tempus eleifend. Integer viverra erat ante. <span>Aliquam gravida ac nibh non sollicitudin.</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

here's我为你制作的一个简单例子。基本上你想要某种事件，我认为on('input')在这里工作得很好，然后检查某处是否有<span>元素。

这当然不是一个完整的例子，可以使用更多的工作，但它应该让你开始。

$('#textarea').on('input', function() {
    var text = $('#textarea').val();
    $('#result').html(text);
    if ($('#result').html().indexOf('<span>') > -1) {
        $('span:not(.highlighted)').addClass('highlighted');
    }
});

// Set the value initially and trigger the event.
$('#textarea').val('Hello <span>World</span>.').trigger('input');

textarea {
    width: 196px;
    height: 100px;
}
#result {
    border: 1px solid gray;
    width: 200px;
    height: 200px;
    overflow: scroll;
}
.highlighted {
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id='textarea'></textarea>
<div id='result'></div>

Answer 2

Stack Overflow条目涵盖了许多使用javascript突出显示页面上文本的方法：

How to highlight text using javascript

如果这不是您想要的，请在下方发表评论。