Question

我正在制作一个脚本，让用户在屏幕上选择（当他们在浏览器中实际突出显示文本时）并且应该操纵该文本。

这就是我想要做的。

获取所选文本，在原始字符串中搜索所选文本，然后使用特定HTML标记（<b>, <span>, <a>）

包装原始字符串中找到的文本

我正在使用jQuery.textselect插件。

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

实施例：如果屏幕上显示此文字：“HELLO WORLD”

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

对不起感到困惑，谢谢你的帮助！

Answer 1

这是我能得到的最接近的。由于一些原因，它并不理想（如果你突出显示Hello，它将突出显示所有的hellos）。文本选择插件没有特别标准化，我无法确定一种方法来了解文本中的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>"));
    });
});

这是一个很好的问题。

jquery用户屏幕选择

1 个答案: