如何包装html标签以用于jquery mouseup选择错误? | 如何包装html标签以用于jquery

本文介绍了如何包装html标签以用于jquery mouseup选择错误?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已在使用getSelection选择整个单词中引用了答案.我想从body中选择mouseup.比为selection words包装<p>标签.这是代码.那怎么办呢?谢谢.

I have reference the answer here Select whole word with getSelection. I would like to make a mouseup selection completed words from body. than wrap <p> tag for the selection words. Here is the code. So how to? Thanks.

<script src="jquery.js"></script>
<script>
(function($) {
function getSelected() {
  if(window.getSelection) { return window.getSelection(); }
  else if(document.getSelection) { return document.getSelection(); }
  else {
    var selection = document.selection && document.selection.createRange();
    if(selection.text) { return selection.text; }
    return false;
  }
  return false;
}

function expand(range) {
    if (range.collapsed) {
        return;
    }

    while (range.toString()[0].match(/\w/)) {
        range.setStart(range.startContainer, range.startOffset - 1);
    }

    while (range.toString()[range.toString().length - 1].match(/\w/)) {
        range.setEnd(range.endContainer, range.endOffset + 1);
    }
}

$(document).ready(function() {
  $('body').mouseup(function() {
    var selectionRange = getSelected().getRangeAt(0);
    var start = selectionRange.startOffset;
    expand(selectionRange);
    var selection = selectionRange.toString();
    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
        //how to wrap <p> tag for the selection words?
    }
  });
});
})(jQuery);
</script>
<style>
p {color:blue; }
</style>
<body>
Facebook needs to scrape your page to know how to display it around the site.

Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when an admin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook URL Linter. Facebook observes cache headers on your URLs - it will look at "Expires" and "Cache-Control" in order of preference. However, even if you specify a longer time, Facebook will scrape your page every 24 hours.

The user agent of the scraper is: "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"
</body>

更新:

var new_html = $('body').html().split(selection, 1)[0] + '<p>' + selection + '</p>' + $('body').html().split(selection, 2)[1];
$('body').html(new_html);

推荐答案

尝试一下:

(function($) {
function getSelected() {
  if(window.getSelection) { return window.getSelection(); }
  else if(document.getSelection) { return document.getSelection(); }
  else {
    var selection = document.selection && document.selection.createRange();
    if(selection.text) { return selection.text; }
    return false;
  }
  return false;
}

function expand(range) {
    if (range.collapsed) {
        return;
    }

    while (range.toString()[0].match(/\w/)) {
        range.setStart(range.startContainer, range.startOffset - 1);
    }

    while (range.toString()[range.toString().length - 1].match(/\w/)) {
        range.setEnd(range.endContainer, range.endOffset + 1);
    }
}

$(document).ready(function() {
  $('body').mouseup(function() {
    var selectionRange = getSelected().getRangeAt(0);
    var start = selectionRange.startOffset;
    expand(selectionRange);
    var selection = selectionRange.toString();
    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
        var el = $('body');
        el.html(el.html().replace(selection, "<p>"+selection+"</p>"));    }
  });
});
})(jQuery);

http://jsfiddle.net/CHhJG/

这篇关于如何包装html标签以用于jquery mouseup选择错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！