Select all or highlight all Text in an Element

问题

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">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Demo | Prettify.JS&lt;/title&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>
    <!-- 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>

回答1:

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);
}

回答2:

Thanks guys, I really appreciate your help. I did some research on your responses, and had gotten a reply from the author of the script. I was pulling my hair out and kind of wanted to throw the puter out the window :P

Anyways, the author Satya stated that the select.js script needs to be at the END of the document rather in the header. It works great too!

<!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">
    <!-- 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 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">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Demo | Prettify.JS&lt;/title&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="js/select2.js"></script>
    <script>
  !function ($) {
    $(function(){
      window.prettyPrint && prettyPrint()   
    })
  }(window.jQuery)
</script>
  </body>
</html>

来源：https://stackoverflow.com/questions/21147949/select-all-or-highlight-all-text-in-an-element

标签

javascript

jquery

html

twitter-bootstrap

google-code-prettify