javascript - jquery 用户屏幕选择

Question

我正在编写一个脚本，让用户进行屏幕选择(当他们在浏览器中实际突出显示文本时)并且应该操纵该文本。

这就是我想要做的。

获取选中的文本，在原始字符串中搜索选中的文本，然后将在原始字符串中找到的文本用特定的 HTML 标记(<b>, <span>, <a>)包裹起来

我正在使用 jQuery.textselect插件。

我无法弄清楚的部分是一旦找到用户选择如何操作原始文本。

例子: 如果屏幕上显示此文本:“HELLO WORLD”

原文为HELLO WORLD，用户选择HELLO，然后脚本搜索原文为用户选择，将HELLO用<b>包裹起来标签然后输出新的原文……有意义吗？

抱歉让您感到困惑，感谢您的帮助!

Answer 1

这是我能得到的最接近的。由于某些原因，它并不理想(如果您突出显示 Hello，它会突出显示所有的 hello)。文本选择插件不是特别标准化，我无法找到一种方法来了解文本中的 WHERE，除了像素定位之外，事件正在发生，因为 e 变量是一个事件对象，而不是 $(this) 风格的 DOM 元素。

$(function() {
  $(document).bind('textselect', function(e) {
        $('body').html($('body').html().replace(e.text,"<b>"+e.text+"</b>"));
    });
});

jQuery 不太适合此操作，因为它倾向于迎合 DOM 元素的操作，而不是文本操作。

编辑:一个更精确的选项，但这限制了您对单个 DOM 元素产生这种效果:

$(function() {
  $(document).bind('textselect', function(e) {
      var $this = $(e.target);
      $this.html($this.html().replace(e.text,"<b>"+e.text+"</b>"));
    });
});

这是一个很好的问题。