JQuery заменяет часть текста в <p> на <img>

0

У меня есть этот код в моем теле:

<p>
    hello ok hello no
<p>

<p>
    ok hello ok ko 
<p>

Я хочу заменить для каждого <p> текст "ok" <img> <img src="ok.png" alt="good word"/>

Можно ли сделать это?

Примечание: я должен применить эту функцию для других текстов, которые могут содержать апостроф и/или цитату

Теги:

4 ответа

3
Лучший ответ

Используйте each:

$('p').each(function() {
    this.innerHTML = this.innerHTML.replace(/\bok\b/g, '<img src="ok.png" alt="good word"/>')
})

Я использовал /\bok\b/ чтобы что-то вроде token не совпало. \b означает "граница слова".

Вот скрипка.

Поделиться
  • 0
    спасибо за ваше решение, но у меня есть такой результат: он заменяет только первое 'ok' каждого <p> и добавляет разрывную строку после замены
  • 1
    @tchiko Я исправил это.
Показать ещё 4 комментария
0

Я лично предлагаю:

$('p').html(function(i,h){
    return h.replace(/\bok/g,'<img src="ok.png" alt="good word" />');
});

Демо-версия JS Fiddle.

Рекомендации:

Поделиться
-1

попробуйте replaceWith - jquery

$( "<p>" ).replaceWith( '<img src="ok.png" alt="good word"/>');
$( "</p>" ).replaceWith( "" );

для получения дополнительной информации см. документацию по jquery http://api.jquery.com/replaceWith/

Поделиться
  • 2
    ОП пытается заменить только слово «ок» изображением, и в любом случае этот ответ неверен, так как $('<p>') создает элемент p а второй ничего не делает.
-2

надеюсь, это поможет

   var x=$('p').html();
    var n=x.replace("ok","<img src='ok.png' alt='good word'>"); 
    $('p').html(n);
Поделиться
  • 1
    это заменит все p с текстом первого p . Вы пробовали это? Вы можете попробовать запустить его на этой странице и посмотреть, почему он не работает.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню