JQuery найти и заменить строку - PullRequest
Новая
       15

JQuery найти и заменить строку

70 голосов
/ 25 февраля 2011

У меня где-то на сайте есть определенный текст, скажем, "lollypops", и я хочу заменить все вхождения этой строки на "marshmellows". Проблема в том, что я не знаю, где именно текст. Я знаю, что могу сделать что-то вроде: 

$(body).html($(body).html().replace('lollypops', 'marshmellows'));

Это, вероятно, сработает, но мне нужно переписать как можно меньше HTML, поэтому я думаю что-то вроде:

  1. поиск строки
  2. найти ближайший родительский элемент
  3. переписать только ближайший родительский элемент
  4. заменить это даже в атрибутах, но не во всех, например, заменить его в class, но не в src

Например, у меня была бы такая структура 

<body>
    <div>
        <div>
            <p>
               <h1>
                 <a>lollypops</a>
               </h1>
            </p>
            <span>lollypops</span>
        </div>
    </div>
    <p>
       <span class="lollypops">Hello, World!</span>
       <img src="/lollypops.jpg" alt="Cool image" />
    </p>
<body>

В этом примере каждое вхождение "lollypops" будет заменено, только <img src="... останется прежним, и единственными элементами, которые будут фактически манипулироваться, будут <a> и оба <span> s.
Кто-нибудь знает, как это сделать?

Ответы [ 4 ]

134 голосов
/ 25 февраля 2011

Вы можете сделать что-то вроде этого: 

$("span, p").each(function() {
    var text = $(this).text();
    text = text.replace("lollypops", "marshmellows");
    $(this).text(text);
});

Лучше пометить все теги текстом, который необходимо проверить, подходящим именем класса.

Кроме того, это может иметь проблемы с производительностью. jQuery или javascript вообще не очень подходят для такого рода операций. Вам лучше делать это на стороне сервера.

14 голосов
/ 25 февраля 2011

Вы можете сделать что-то таким образом: 

$(document.body).find('*').each(function() {
    if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
        $(this).removeClass('lollypops');
        $(this).addClass('marshmellows');
    }
    var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
    var text = $(this).text(); //getting just current node text
    text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
    $(this).text(text); //setting text
    $(this).append(tmp); //re-append 'foundlings'
});

пример: http://jsfiddle.net/steweb/MhQZD/

6 голосов
/ 14 октября 2013

Ниже приведен код, который я использовал для замены текста на цветной текст.Все просто, взял текст и заменил его внутри тега HTML.Это работает для каждого слова в этом классе тегов.

$('.hightlight').each(function(){
    //highlight_words('going', this);
    var high = 'going';
    high = high.replace(/\W/g, '');
    var str = high.split(" ");
    var text = $(this).text();
    text = text.replace(str, "<span style='color: blue'>"+str+"</span>");
    $(this).html(text);
});
0 голосов
/ 06 ноября 2015

Почему вы просто не добавляете класс в контейнер строк, а затем заменяете внутренний текст?Как в этом примере.

HTML: 

<div>
    <div>
        <p>
           <h1>
             <a class="swapText">lollipops</a>
           </h1>
        </p>
        <span class="swapText">lollipops</span>
    </div>
</div>
<p>
   <span class="lollipops">Hello, World!</span>
   <img src="/lollipops.jpg" alt="Cool image" />
</p>

jQuery: 

$(document).ready(function() {
    $('.swapText').text("marshmallows");
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...