javascript - Select part of text after it's been added - Stack Overflow

admin管理员组

文章数量:1406471

I have this code:

$sel = 'lorem ipsum';
jQuery(this).html('<p>Hello world ' + $sel +' great day!');

So the .html() is added via ajax.

I want the $sel text to be selected when it's output on the page (as if the user highlighted it with their cursor).

I have the following code to select elements:

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

How can I use that code and select just the text within $sel? So, output the html and select the $sel part.

I have this code:

$sel = 'lorem ipsum';
jQuery(this).html('<p>Hello world ' + $sel +' great day!');

So the .html() is added via ajax.

I want the $sel text to be selected when it's output on the page (as if the user highlighted it with their cursor).

I have the following code to select elements:

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

How can I use that code and select just the text within $sel? So, output the html and select the $sel part.

• javascript
• jquery

Share Improve this question Follow edited May 29, 2016 at 3:04 Arjun 1,39511 gold badge1212 silver badges2828 bronze badges asked Feb 20, 2016 at 8:01 Henrik PettersonHenrik Petterson 7,1242121 gold badges8181 silver badges159159 bronze badges 7

• 1 I'll bounty this with 50 points once it's eligible for a working solution. – Henrik Petterson Commented Feb 20, 2016 at 8:02
• You have not used end tag </p> – Parth Trivedi Commented Feb 20, 2016 at 8:12
• That's not how bounties work. Bounties are promises. Set one now or don't set one now. – Tomalak Commented Feb 20, 2016 at 8:32
• 1 @Tomalak You can only set a bounty 2 days after your question is posted. If you look through my recent questions, you'll see that whenever I've promised a bounty, I have started the bounty. In fact, I think I've done 3 bounties just this week :) – Henrik Petterson Commented Feb 20, 2016 at 9:43
• True, I did not think of the two day delay. It's a rather unusual thing to promise bounties ahead of time though. I still think that's not how they were meant to be used, but well. ;) – Tomalak Commented Feb 20, 2016 at 9:55

 |  Show 2 more ments

7 Answers 7

Sorted by: Reset to default 5

The function below (createSelectedSpan) accepts a single argument, value. Every time this function is called, a new local variable sel, with the value of span element, is created. The sel's innerHTML is set to the value of argument value. Then, sel is adopted as a child by body. And at last sel is selected.

Besides this, I've modified your SelectText function to set the variable text defined inside it to the DOM Node passed to it as an argument.

This function can be called multiple times without any error with the newly added element being selected and other elements being deselected.

  function SelectText(element) {
  var doc = document,
    text = element,  // A modification is made here
    range, selection;
  if (doc.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(text);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(text);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

function createSelectedSpan(value){
  var sel = document.createElement("span");
  sel.innerHTML = value;

  $("body").append(sel);

  
  SelectText(sel);
}

createSelectedSpan("hello world");
setTimeout(function(){createSelectedSpan("hello world2")},5000); //called second time

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The function "SelectText" which you are using is fine. I think the solution can be like this:

$(document).ready(function(){
    $sel = 'lorem ipsum';
    $('#feedback').html('<p>Hello world <span id="selection">'+ $sel +'</span> great day!</p>');
    SelectText('selection');  
});

You could insert the element through jQuery and then select the element you just inserted. That way you always target whatever it is that you're inserting at the moment.

var sel = $('<span>').html('lorem ipsum');
$('body').html('<p>Hello world <span class="insertion-point"></span> great day!</p>');
$('body').find('.insertion-point').after(sel);
var toSelect = sel.get(0);

if (document.body.createTextRange) {
	range = document.body.createTextRange();
    range.moveToElementText(toSelect);
    range.select();
} else if (window.getSelection) {
	selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(toSelect);
    selection.removeAllRanges();
    selection.addRange(range);
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can wrap the $sel in any custom tag, doesn't matter which one, for example x.

this.innerHTML = '<p>Hello world <x>' + $sel +'</x> great day!');

And then simply highlight it. Since this contains only the p tag, you can reference it descending directly from this through the p tag onto the x tag, which contains the $sel value. You don't have to worry about other x tags on the webpage since you start looking from this downwards. You will always find exactly 1 p tag and inside it only x tag.

var selection = window.getSelection();        
var range = document.createRange();
var p = this.children[0]; // 'children' ignores Text nodes unlike 'childNodes'
var x = p.children[0];
range.selectNodeContents(x);
selection.removeAllRanges();
selection.addRange(range);

Tadaa.

Your function is fine, so the easiest way to select it is to call it once your Ajax is finished. Just listen for the event to fire and call the function.

This should be done this way :

var xhr = new XMLHttpRequest();
// do stuff

// listen to the loading to be finished
xhr.onreadystatechange = function()
    {
        try
        {
            if (xhr.readyState == 4 && xhr.status == 200) 
            {           
             /* here your loading is finished, call the function
                on the id of the element which received the text */
             SelectText('yourElement');
            }
        }
        catch(e)
        {
        alert(e.message);
        }
    };

So just after the loading is finished i.e. when the text is outputted on your page, the text will be highlighted. Voila !

You can insert the new element within a span tag:

with Jquery:

$sel = 'lorem ipsum';
jQuery(this).html( '<p>Hello world <span id=\"selectedSpan\">' + $sel +'</span> great day!</p>')

jQuery("#selectedSpan").css('color','red')
jQuery("#selectedSpan").css('background','yellow')

This way you can choose whatever style you want it to look like.

The best approach is to use CSS for this purpose.

var text = "Bla Bla";
$('body').append("<p>Text Before, <span class='highlight'>" + text + "</span>, Text After</p>");

.highlight {
  background-color: yellow;
  }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

本文标签： javascriptSelect part of text after it39s been addedStack Overflow