jQuery знайти та замінити рядок


86

У мене є десь на веб-сайті конкретний текст, скажімо "льодяники", і я хочу замінити всі випадки цього рядка на "зефір". Проблема в тому, що я не знаю, де саме знаходиться текст. Я знаю, що міг зробити щось на зразок:

$(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>

У цьому прикладі кожна поява "льодяників" буде замінена, лише <img src="...залишиться незмінною, і єдиними елементами, якими насправді можна було б маніпулювати, будуть <a>і обидва <span>s.
Хтось знає, як це зробити?


Існує відмінний добре написаний плагін для заміни тексту. jquery-replacetext-plugin . Плагін замінює текст, залишаючи всі теги та атрибути недоторканими. Ви також можете знайти гарний підручник для цього плагіна на spotlight-jquery-replacetext
Hussein

Відповіді:


153

Ви можете зробити щось подібне:

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

Буде краще позначити всі теги текстом, який потрібно перевірити, відповідною назвою класу.

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


Я знаю, на жаль, я не можу зробити це на стороні сервера. Крім того, запропоноване вами рішення для мене не підходить, оскільки я не знаю, де саме буде рядок. Це може бути всередині <span>, може бути всередині <h4>і так далі ...
cypher

Тоді ви можете спробувати $ ("*"), але я б не рекомендував.
kgiannakakis

14

Ви можете зробити щось таким чином:

$(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/


7

Нижче наведено код, який я використовував для заміни тексту, кольоровим. Це просто, взяв текст і замінив його в 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);
});

2
var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);

1
Я думаю, що лапки навколо рядкової змінної у функції 'replace' потрібно видалити.
Джейсон Гліссон,

0

Ви можете зробити щось подібне:

HTML

<div class="element">
   <span>Hi, I am Murtaza</span>
</div>


jQuery

$(".element span").text(function(index, text) { 
    return text.replace('am', 'am not'); 
});

-3

Чому ви просто не додаєте клас до контейнера рядків, а потім замінюєте внутрішній текст? Так само, як у цьому прикладі.

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

2
Це 4-річне і вже відповіло на запитання, але проблема полягала в тому, що я не міг зробити те, що ви пропонуєте.
cypher

Ця відповідь повністю ігнорує специфікацію OP: "Я хочу замінити всі випадки цього рядка ... Проблема в тому, що я не знаю, де саме знаходиться текст".
Лука
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.