Selecione parte do texto depois de ser adicionado

9

Eu tenho este código:

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

Portanto, o .html() é adicionado via ajax.

Eu quero que o texto $sel seja selecionado quando estiver output na página (como se o usuário o tivesse destacado com o cursor).

Eu tenho o seguinte código para selecionar elementos:

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

Como posso usar esse código e selecionar apenas o texto em $sel ? Então, imprima o html e selecione a parte $sel .

    
por Henrik Petterson 20.02.2016 в 09:01
fonte

7 respostas

5

A função abaixo ( createSelectedSpan ) aceita um único argumento, value . Toda vez que essa função é chamada, uma nova variável local sel , com o valor de span element, é criada. O innerHTML de sel está definido com o valor do argumento value . Então, sel é adotado como filho por body . E finalmente sel é selecionado.

Além disso, modifiquei sua função SelectText para definir a variável text definida dentro dela como DOM Node passada como argumento.

Esta função pode ser chamada várias vezes sem nenhum erro com o elemento recém-adicionado sendo selecionado e outros elementos sendo desmarcados.

  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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
por Arjun 20.02.2016 / 11:56
fonte
0

A função "SelectText" que você está usando está bem. Eu acho que a solução pode ser assim:

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

Você pode inserir o elemento por meio do jQuery e, em seguida, selecionar o elemento que acabou de inserir. Dessa forma, você sempre segmenta o que quer que esteja inserindo no momento.

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
por Jaime Rodas 20.02.2016 / 09:32
fonte
0

Você pode agrupar a tag personalizada $ sel em any , não importa qual, por exemplo x.

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

E, em seguida, simplesmente destaque-o. Como este contém apenas a tag p , você pode fazer referência a ele descendo diretamente de this através da tag p para o tag tag x , que contém o valor $ sel . Você não precisa se preocupar com outras tags x na página da web desde que começou a procurar de isso para baixo. Você sempre encontrará exatamente 1 tag p e dentro dela somente a tag x .

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.

    
por Azamantes 25.05.2016 / 09:02
fonte
0

Sua função é boa, então a maneira mais fácil de selecioná-la é chamá-la assim que o Ajax terminar. Apenas ouça o evento para disparar e chamar a função.

Isso deve ser feito assim:

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

Portanto, logo após o carregamento ser concluído, ou seja, quando o texto for enviado em sua página, o texto será destacado. Voila!

    
por user3241019 26.05.2016 / 11:35
fonte
0

Você pode inserir o novo elemento em uma tag de span:

com 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')

Dessa forma, você pode escolher o estilo que quiser.

    
por Giorgggg Napone 28.05.2016 / 03:20
fonte
-3

A melhor abordagem é usar o CSS para essa finalidade.

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
por Muhammad Asad Ali Amjad 20.02.2016 / 09:32
fonte