代码之家  ›  专栏  ›  技术社区  ›  dennismonsewicz

jquery用户屏幕选择

  •  5
  • dennismonsewicz  · 技术社区  · 14 年前

    我正在编写一个脚本,该脚本接受用户在屏幕上的选择(当他们在浏览器中实际高亮显示文本时),并且应该操作该文本。

    这就是我要做的。

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

    我正在使用 jQuery.textselect 插件。

    我想不通的是,一旦找到用户选择,如何操作原始文本。

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

    原始文本是HELLO WORLD,用户选择HELLO,然后脚本在原始文本中搜索用户选择,并用 <b> 标记,然后输出新的原始文本。。。有道理?

    很抱歉给你添麻烦,谢谢你的帮助!

    1 回复  |  直到 11 年前
        1
  •  2
  •   Yahel    14 年前

    这是我能得到的最接近的。有几个原因不太理想(如果突出显示Hello,它将突出显示所有Hello)。文本选择插件没有特别标准化,我无法确定一种方法来知道文本中的位置,除了像素定位之外,事件正在发生,因为 e 变量是一个事件对象,而不是$(this)样式的DOM元素。

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

    jQuery不太适合这种情况,因为它倾向于处理DOM元素,而不是处理文本。

    EDIT:一个更精确的选项,但这限制了您对单个DOM元素的这种效果:

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

    这是一个很好的问题。