How can I make some text selected on page load?

Question

On the sample text below how can I make some text selected on document load?

This is the sample text. How can I make some text "This is the sample text" selected... like mouse selected but on page load? This is the sample text. How can I make some text selected? This is the sample text. How can I make some text selected? This is the sample text. How can I make some text selected? This is the sample text. How can I make some text selected?

Use google. Type 'how to highlight text with javascript/jquery'. And then search for .on() function in jQuery. — kind user, Oct 13 '16 at 22:24
This can be helpful http://stackoverflow.com/a/987376/1175355 — Gerson Beltrán, Oct 13 '16 at 22:27
Possible duplicate of [Selecting text in an element (akin to highlighting with your mouse)](http://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse) — MJH, Oct 13 '16 at 22:33

ThunD3eR · Answer 1 · 2016-10-14T09:00:23.253

Some research Is always good and even more rewarding when you solve it by urself.

Anyhow here is a fast mashup:

HTML

 <span>test1 test1 test1 test1 test1 test1 test1</span></br>
 <span>test2 test2 test2 test2 test2 test2 test2</span></br>
 <span>test3 test3 <span class="target">[test3 test3]</span> test3 test3 test3</span></br>
 <span>test4 <span class="target">[test4 test4 test4 test4]</span> test4 test4</span></br>
 <span>test5 test5 test5 test5 test5 test5 test5</span></br>

CSS

.marked{
  background-color:blue;
  font-weight: bold;
  color:white;
}

Script

I know you asked for pageload but for future use you can do this on a click event:

$(function() {

$(".target").on("click",function() {

    $(this).addClass("marked");
    var str = $(this).text();

    str = str.replace(/[[\]]/g, "");

    $(this).text(str);


});

})

Can read more about that here

Fiddle

On page load:

$(function() {

$(".target").each(function(){

    var str = $(this).text();
    str = str.replace(/[[\]]/g, "");

    $(this).addClass("marked").text(str);
})
})

onloadFiddle

Ricky Ruiz · Answer 2 · 2016-10-14T00:41:57.233

There might be a better solution, but the one I came up with is the one below.

Code Snippet:

var span = document.getElementsByTagName("span");

function wrapSelection(el) {
  for (var i = 0; i < el.length; i++) {
    var text = el[i].textContent;
    var textToCopy = text.substring(text.lastIndexOf("[") + 1, text.lastIndexOf("]"));
    if (textToCopy) {
      console.log(textToCopy);
      var formattedText = text.replace(/\[|\]/g, '');
      var textToCopyHtml = '<span class="copy">' + textToCopy + '</span>';
      var result = formattedText.replace(textToCopy, textToCopyHtml);
      el[i].innerHTML = result;
    }
  }
}

wrapSelection(span);

.copy {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
  background-color: gold;
  font-weight: bold;
}

<span>[test1 test1 test1] test1</span>
<span>test4 test4 test2 test2</span>
<span>test3 [test3 test3] test3</span>
<span>test4 test4 [test4 test4]</span>

Notes:

The CSS property user-select, currently needing vendor prefixes, allows you to select everything with the value all in one click. You can check support here.

How can I make some text selected on page load?

2 Answers2