Как взять только текст а разметку оставить внутри элемента?
<div class="somediv"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> 5 </div> Всем привет. Встала передо мной такая задача, нужно как нибудь текст в div'е с классом somediv обернуть в span а остальную разметку в этом div'е не трогать. В данном случае нужно обернуть в span текст "5". Хочеться нормально как то решить это, а не регулярками, прошу помогите. |
Страничный навигатор?
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<div class="somediv">
<a href="#">1</a><br/ >
<a href="#">2</a><br/ >
<a href="#">3</a><br/ >
<a href="#">4</a><br/ >
5<br/ >
6<br/ >
7<br/ >
8<br/ >
</div>
<script>
var div = document.querySelector('.somediv');
Array.prototype.forEach.call(div.childNodes, function(item) {
if(item.nodeType == 3 && item.data.match(/\S+/)) {
var span = document.createElement('span');
span.innerHTML = item.data;
item.parentNode.replaceChild(span, item);
}
});
</script>
</body>
</html>
|
Кирюха =),
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var s = $(".somediv"), a = $("*",s).remove(), t = $.trim(s.text());
s.wrapInner("<span/>").prepend(a);
$("span:last",s).text(t);
alert($("body").html())
});
</script>
</head>
<body>
<div class="somediv">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
5
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 02:48. |