Javascript: заменить только текст внутри<p></ p>?

Как я могу заменить только текст внутри <p></p> без удаления каких-либо других элементов внутри?

На самом деле это выглядит так:

<div class = "text">
    <p>
        "Old text 1 "
        <img src="http://urlofimage.com"> 
        "Old 2"
    </p>
</div>

И я хотел бы получить это:

<div class = "text">
    <p>
        "New text 1 "
        <img src="http://urlofimage.com"> 
        "New text 2"
    </p>
</div>

Заранее спасибо!

Источник

3 ответа

Решение

Повторять childNodes из p и искать текстовые узлы

var p = document.querySelector( ".text p" );
Array.from( p.childNodes ).forEach( s => {
   if ( s.nodeType == Node.TEXT_NODE && s.textContent.trim().length > 0 )
   {
      //change the value here
   }
});

демонстрация

var p = document.querySelector(".text p");
Array.from(p.childNodes).forEach( (s, i) => {
  if (s.nodeType == Node.TEXT_NODE && s.textContent.trim().length > 0) {
     s.textContent = "new value" + i;
  }
});
<div class="text">
  <p>
    "Old text 1 "
    <img src="http://urlofimage.com"> "Old 2"
  </p>
</div>

Источник 
<html>
<body>

<div class = "text">
    <p>
        <span id="text1">New text 1 </span>
        <img src="http://urlofimage.com"> 
        <span id="text2">New text 1 </span>
    </p>
</div>
<button onclick="myFunction()">Change Text</button>


<script>
function myFunction() {
    document.getElementById("text1").innerHTML = "Hello there";
}

</script>

</body>
</html>

Приложите текст с уникальным идентификатором.

Источник 
data = $('.text p').html().trim().split('\n')

Это даст вам массив размера 3, в котором компонент изображения будет иметь второй индекс, так что вы можете просто добавить обновленные значения в data[0] и data[2], а затем с помощью функции.toString() вы можете получить простой строка обновленного содержимого, которое вы можете обновить в $('.text p').

data[0] = '"New text 1 "';
data[2] = '"New text 2"';

var updatedString = data.toString();
$('.text p').html(updatedString);

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

++++++++++++++ Обновление +++++++++++++++++

Он отлично работает на моей машине, только что добавил код для обработки запятой, вот полный код:

   $(document).ready(function(){
        data = $('.text p').html().trim().split('\n')
        data[0] = '"New text 1 "';
        data[2] = '"New text 2"';
        console.log(data);
        var updatedString = data.toString();
        updatedString = updatedString.replace(/,/g, "\n");
        $('.text p').html(updatedString);
    })
Источник
Другие вопросы по тегам