Используя jQuery, как изменить текст вне тегов?

Question

Учитывая строку текста, которая находится как рядом с span, так и внутри div, каковы некоторые методы, чтобы изменить только этот текст, оставив окружающий HTML нетронутым? Например:

<div id="my-div">modify this text<span id="my-span"></span></div>

Я пробовал такие вещи, как

$('#my-div').html(function(i, elem){blah;});

но это, кажется, приводит к удалению диапазона и добавлению нового диапазона (я замечаю, что некоторые стили теряются в диапазоне).

Я понимаю, что было бы лучше обернуть текстовую строку в свои собственные теги HTML перед применением кода на стороне клиента, но это вне моего контроля.

Answer 1

Это похоже на работу:

$('#my-div').contents()
            .filter(function() { return this.nodeType == 3; })
            .replaceWith('new text or html');

nodeType == 3 - проверить текстовый узел.

Answer 2

вы пробовали что-то вроде:

$(document).ready(function(){

  var elems = $('#myDiv *').detach();

  $('#myDiv').text('new texts...').append(elems);

})​

быстрый демо

редактировать

или как Алекс предложил использовать .contents():

  $('#myDiv').contents()
    .filter(function(){
       return this.nodeType != 1 && $.trim($(this).text()) != '';        
    })
    .replaceWith("I am the new text");

Answer 3

А как насчет использования метода jQuery contents()?

http://api.jquery.com/contents/

Answer 4

Вы можете просто использовать замену строки:

HTML

<div id="my-div">modify this text <span id="my-span">or this text here</span></div>

Сценарий

$('#my-div').html(function(i,html){
 return html.replace('this text', 'some new text').replace('or this text', 'and replace this text');
})

Answer 5

Вместо изменения его строки HTML, измените дерево DOM, найдите текстовые узлы верхнего уровня и сделайте с ними.