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

Question 1

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

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

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

искать строку
найти ближайший родительский элемент
перезаписать только ближайший родительский элемент
замените это даже в атрибутах, но не во всех, например замените его 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.
Кто-нибудь знает, как это сделать?

Question 2

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

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

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

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

Question 3

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

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

Question 4

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

Question 5

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

Question 6

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

HTML

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

jQuery

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

Question 7

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

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

Answer 1

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

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

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

искать строку
найти ближайший родительский элемент
перезаписать только ближайший родительский элемент
замените это даже в атрибутах, но не во всех, например замените его 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.
Кто-нибудь знает, как это сделать?

Answer 2

Есть отличный хорошо написанный плагин для замены текста. jquery-replacetext-plugin . Плагин заменяет текст, оставляя все теги и атрибуты нетронутыми. Вы также можете найти хороший учебник для этого плагина по адресу spotlight-jquery-replacetext

Hussein

Answer 3

153

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

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

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

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

Кгианнакакис
источник

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

cypher

Тогда вы можете попробовать $ ("*"), но я бы не рекомендовал его.

kgiannakakis

Answer 4

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

cypher

Answer 5

Тогда вы можете попробовать $ ("*"), но я бы не рекомендовал его.

kgiannakakis

Answer 6

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

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

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

Answer 8

2

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

Сай
источник

1

Я думаю, что кавычки вокруг строковой переменной в функции «заменить» необходимо удалить.

Джейсон Глиссон,

Answer 9

1

Я думаю, что кавычки вокруг строковой переменной в функции «заменить» необходимо удалить.

Джейсон Глиссон,

Answer 10

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

HTML

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

jQuery

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

Answer 11

-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: «Я хочу заменить все вхождения этой строки ... Проблема в том, что я не знаю, где именно находится текст».

Люк

Answer 12

2

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

cypher

Answer 13

Этот ответ полностью игнорирует спецификацию OP: «Я хочу заменить все вхождения этой строки ... Проблема в том, что я не знаю, где именно находится текст».

Люк

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

Ответы: