如何为jquery mouseup选择词包装html标签？答案

【问题标题】：How to wrap html tag for jquery mouseup selection wrods?如何为jquery mouseup选择词包装html标签？
【发布时间】：2011-10-18 05:57:55
【问题描述】：

我在这里Select whole word with getSelection 参考了答案。我想从body 中选择mouseup 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);

【问题讨论】：

标签： javascript jquery getselection mouseup

【解决方案1】：

试试这个：

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

【讨论】：

@Giberno：真的吗？整个身体的innerHTML 中的字符串替换是一种糟糕的方法。它在选择跨越元素边界的任何情况下都不起作用，它将替换正文中的所有现有元素，从而丢失任何现有的事件处理程序，它不一定会产生有效的 HTML，而且速度会很慢。
@Tim Down，嗯...我不小心检查了这个问题。这将替换整个正文中的第一个词，而不是选择词。我在stackoverflow中搜索word selection questions，你是这部分的专家。那么你有什么好主意来做一个正确的答案吗？非常感谢。
@Tim Down，嗨，朋友，晚上好，你还在吗？我想你已经得到了一个很好的答案，不是吗？
@Giberno：在一般情况下处理并非易事。您需要在选择的开头和结尾拆分现有段落才能正确执行此操作。考虑它的最有用的方法是根据您需要对 DOM 树执行的操作。
谢谢@Tim Down，所以我想我应该做另一个函数