如何包装html标签为jquery鼠标选择单词

How to wrap html tag for jquery mouseup selection wrods?

本文关键字：jquery 鼠标 选择 单词 标签 html 何包装 包装      更新时间：2023-09-26

我在这里引用了答案，使用getSelection选择整个单词。我想让mouseup从body中选择completed words。然后为selection words包装<p>标签。下面是代码。那么该怎么做呢?谢谢。

<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/

相关文章：