Как удалить тег и достать текст

303
01 апреля 2017, 00:02

Делаю поиск, но столкнулся с проблемой, что скрипт не работает, если текст взят в тег span. Как можно удалить span, чтобы текст остался?

html:

<p>какой то текст <span> здесь </span> находиться</p>

Результат должен быть таким:

<p>какой то текст  здесь находиться</p>
Answer 1

Без jQuery можно так:

function removeSpan() { 
  var elem = document.getElementsByTagName('p')[0]; // берем элемент p 
  var textInside = elem.textContent; // сохраним текст из p 
  var child = document.getElementsByTagName('span')[0]; // берем элемент span 
  elem.removeChild(child); // удалим span из p 
  elem.textContent = textInside; // перезапишем текст в p 
}
<p>Какой то текст<span> здесь </span>находится</p> 
<button onclick="removeSpan()">Удалить span</button>

Для случая, когда элемент p и span всего один - будет работать. В противном случае можно добавить к элементам id и вместо getElementsByTagName вызывать getElementById.

Answer 2

Простой вариант:

$('p').html( $('p').text() );
p {color: red} 
span {color: blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>какой то текст <span> здесь </span> находиться</p>

Если у вас много тегов и вам нужно достать только с одного, то можно таким воспользоваться:

$('.b').replaceWith(function() { 
  return $(this).text(); 
});
p {color: red} 
span {color: blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>какой <span class="a">то</span> текст <span class="b"> здесь </span> находиться</p>

Answer 3

Для удаления лишнего тега можете попробовать так:

var str = "<p>какой-то текст <span>здесь</span> находится</p>"; 
var searchText = $(str).text(); 
console.log(searchText );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

READ ALSO
Можно ли в bootstrap блоку задать ширину?

Можно ли в bootstrap блоку задать ширину?

Как установить фиксированную ширину блока в bootstrap? Пробовал сделать так <div class="col-md-1" style="width: 200px;">, но безуспешноПрошу помощи, кто знает

282
Создание ссылки из картинки с альфа каналом

Создание ссылки из картинки с альфа каналом

Добрый день! Подскажите пожалуйста, можно ли как нибудь, средствами HTML5, создать ссылку произвольной формы, в виде кляксыЕсть png фаил с кляксой...

233