如何选择范围内的HTML内容

我需要选择我的HTML内容（如突出显示的文本，以便我可以复制它）。我想创建一个按钮，选择两个<div>或两个<p>（真的是任何标签）之间的所有内容。查看codepen我需要选择的内容。如何选择范围内的HTML内容

我已经发现了一些选择的想法，但我不知道（有点糊涂）

<input onClick="this.setSelectionRange(0, 9999)" value="Sample Text" /> 
var range = document.createRange(); 
var sel = window.getSelection(); 
range.setStart(el.childNodes[2], 5); 
range.collapse(true);

我希望由两个标签来创建范围。
感谢您的帮助

来源

2014-11-16 bob smitha

http://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin用鼠标突出显示 –

从Select all DIV text with single mouse click根据丹尼斯，你应该使用

function SelectText(element) { 
if (document.selection) { 
    var range = document.body.createTextRange(); 
    range.moveToElementText(document.getElementById(element)); 
    range.select(); 
} else if (window.getSelection) { 
    var range = document.createRange(); 
    range.selectNode(document.getElementById(element)); 
    window.getSelection().addRange(range); 
} 
}

选择从名为element参数元素中的文本。

要确保你可以选择你的表，你必须把它放在一个<div>：

<div id="foo"> 
<table> 
    ... 
</table> 
</div>

你必须做同样的事情与任何其他事情

<div id="bar"> 
<p> 
    ... 
</p> 
</div>

然后，您可以选择该表带有此按钮：

<input type="button" onclick="SelectText(foo)" value="Select table">

而对于其他div S：

<input type="button" onclick="SelectText(bar)" value="Select p">

让我知道，如果它
编码愉快:) -Charlie

来源

2014-11-16 16:17:08 Charlie

感谢您的博文我添加了更新的代码，并不是为什么它不工作[codepen]（http://codepen.io/anon/pen/pvoxYQ?editors=101 ） –

鲍勃，我在Firefox 33/Ubuntu 14.04下的本地文件中试过了，可以工作，但CodePen没有。我不知道是什么导致了这个问题 – Charlie

@bobsmitha我在这个网站的另一个主题上发现了一个可用的JavaScript。我检查了这一点，并在Firefox和Chrome中都能正常工作。让我知道这是否适用于你;）这是一个CodePen-片段：http://codepen.io/anon/pen/gbOQpo – Charlie

如何选择范围内的HTML内容

回答

相关问题