选择全部或突出显示元素中的所有文本 [英] Select all or highlight all Text in an Element
本文介绍了选择全部或突出显示元素中的所有文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
参考资料在这里找到：
http://www.satya-weblog.com/2013/11/javascript-select-all -content-html-element.html
如果有人可能会抽出一些时间，我将非常感谢。
我正在使用新的bootstrap 3.0.2设置复制和粘贴代码的横幅交换， prettify和select2.js指的是在这里找到的演示。
（function（）{
function selectText （元素）{
var doc =文档
，text =元素
，范围，选择
;
if（doc.body.createTextRange）{// ms
range = doc.body.createTextRange（）;
range.moveToElementText（text）;
range.select（）;
} else if（window.getSelection）{//所有其他
selection = window.getSelection（）;
range = doc.createRange（）;
range.selectNodeContents（text）;
selection.removeAllRanges（）;
selection.addRange（range）;
}
}
preTags = document.getElementsByTagName（'pre'）;
for（var i = 0; i< preTags.length; i ++）{
preTags [i] .onclick = function（）{selectText（this）};
}
}）（）;
以下是我设置的演示代码。
<！DOCTYPE html>
< html>
< head>
< title> Bootstrap Banners Template< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
<！ - Bootstrap - >
< link href =css / bootstrap.css =stylesheetmedia =screen>
< link href =css / bootstrap-theme.css =stylesheetmedia =screen>
< link href =js / google-code-prettify / prettify.css =stylesheet>
< script src =js / select2.js>< / script>
<！ - HTML5 Shim和Respond.js IE8支持HTML5元素和媒体查询 - >
<！ - 警告：如果您通过file查看页面，Respond.js不起作用：// - >
<！ - [if lt IE 9]>
< script src =https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js>< / script>
< script src =https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js>< / script>
<！[endif] - >
< / head>
< body>
< div style =margin-top：20px;>< / div>
< div class =container>
< div style =margin-top：50px;>< / div>
< ul class =nav nav-pills>
< li class =active>< a href =＃demo1data-toggle =tab> Demo 1< / a>< / li>
< / ul>
< div class =tab-content>
< div style =margin-top：20px;>< / div>
< div class =tab-pane fade in activeid =demo1>
< p>< / p>
< p>复制并粘贴代码：< / p>
< pre class =prettyprint linenums lang-html>
& lt;！DOCTYPE html& gt;
& lt; html& gt;
& lt; head& gt;
& lt; title& gt; Demo | Prettify.JS&安培; LT; /标题&安培; GT;
& lt; / head& gt;
& lt; body& gt;
& lt; h1& gt; Hello，World！& lt; / h1& gt;
& lt; / body& gt;
& lt; / html& gt;
< / pre>
< / div>
< / div>
< / div>
< div style =margin-top：50px;>< / div>
< / div>
< script src =https://code.jquery.com/jquery.js>< / script>
<！ - 包含所有编译的插件（如下），或者根据需要包含单个文件 - >
< script src =js / bootstrap.js>< / script>
< script type =text / javascriptsrc =js / google-code-prettify / prettify.js>< / script>
< script>
！function（$）{
$（function（）{
window.prettyPrint&&; prettyPrint（）
}）
（window.jQuery）
< / script>
< / body>
< / html>
解决方案
也许，您可以使用 window.getSelection（）获取全局选择对象，然后修改它？来自developer.mozilla.org的示例：
var strongs = document.getElementsByTagName（strong）;
var s = window.getSelection（）;
if（s.rangeCount> 0）s.removeAllRanges（）;
for（var i = 0; i< strongs.length; i ++）{
var range = document.createRange（）;
range.selectNode（strongs [i]）;
s.addRange（range）;
}
I've been searching high and low for something like this, but for some reason I'm having trouble making it work. I'm not sure what I'm missing or doing wrong.
References found here: http://www.satya-weblog.com/2013/11/javascript-select-all-content-html-element.html
Selecting text in an element (akin to highlighting with your mouse)
If someone could possibly spare some time would be much appreciated thanks.
I'm setting up a banner exchange for copy and pasting codes using the new bootstrap 3.0.2, prettify, and select2.js referring to a demo which was found here.
(function() {
function selectText(element) {
var doc = document
, text = element
, range, selection
;
if (doc.body.createTextRange) { //ms
range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) { //all others
selection = window.getSelection();
range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
preTags = document.getElementsByTagName('pre');
for(var i=0;i<preTags.length;i++) {
preTags[i].onclick = function() {selectText(this)};
}
})();
Here is a demo code I've set up.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Banners Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="js/google-code-prettify/prettify.css" rel="stylesheet">
<script src="js/select2.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div style="margin-top: 20px;"></div>
<div class="container">
<div style="margin-top:50px;"></div>
<ul class="nav nav-pills">
<li class="active"><a href="#demo1" data-toggle="tab">Demo 1</a></li>
</ul>
<div class="tab-content">
<div style="margin-top:20px;"></div>
<div class="tab-pane fade in active" id="demo1">
<p></p>
<p>Copy and Paste Code:</p>
<pre class="prettyprint linenums lang-html">
<!DOCTYPE html>
<html>
<head>
<title>Demo | Prettify.JS</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>
</div>
</div>
</div>
<div style="margin-top: 50px;"></div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
<script>
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
</body>
</html>
解决方案
Maybe, you could use window.getSelection() to get the global Selection objects, and then modify it? Example from developer.mozilla.org:
var strongs = document.getElementsByTagName("strong");
var s = window.getSelection();
if(s.rangeCount > 0) s.removeAllRanges();
for(var i = 0; i < strongs.length; i++) {
var range = document.createRange();
range.selectNode(strongs[i]);
s.addRange(range);
}
这篇关于选择全部或突出显示元素中的所有文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
