jquery用户屏幕选择

Question

我正在制作一个脚本,用户在屏幕上选择(当他们在浏览器中物理突出显示文本时)并且应该操纵该文本.

这就是我想要做的.

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

我正在使用jQuery.textselect插件.

我找不到的部分是如何在找到用户选择后操纵原始文本.

示例:如果屏幕上显示此文本:"HELLO WORLD"

原始文本是HELLO WORLD,用户选择HELLO,然后脚本在原始文本中搜索用户选择,并将HELLO包含<b>标签,然后输出新的原始文本......有意义吗？

对不起,感谢困惑,感谢您的帮助!

Answer 1

这是我能得到的最接近的。由于某些原因，它并不理想（如果您突出显示“Hello”，它将突出显示所有“hello”）。文本选择插件不是特别标准化，除了像素定位之外，我无法确定一种方法来知道文本中的何处发生事件，因为变量e是事件对象，而不是 $(this) -style 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>"));
    });
});

这是一个很好的问题。