получить текст элемента без детей в JavaScript
Как получить текст элемента без детей?
Ни element.textContent
, ни element.innerText
кажется, работает.
HTML-код:
<body>
<h1>Test Heading</h1>
<div>
Awesome video and music. Thumbs way up. Love it. Happy weekend to you and your family. Love, Sasha
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
fool("body");
</script>
и вот это fool
функция:
jQuery.fn.justtext = function(text) {
return $(this).clone()
.children()
.remove()
.end()
.text();
};
function fool(el) {
reverse(el);
function reverse(el) {
$(el).children().each(function() {
if($(this).children().length > 0) {
reverse(this);
if($(this).justtext() != "")
reverseText(this);
} else {
reverseText(this)
}
});
}
function reverseText(el){
var text = el.textContent;
var frag = text.toString().split(/ /);
var foo = "";
var punctation_marks = [".",",","?","!"," ",":",";"];
for(i in frag){
if(punctation_marks.indexOf(frag[i]) == -1)
foo += actualReverse(frag[i],punctation_marks) + " ";
}
el.textContent = foo;
}
function actualReverse(text,punctation_marks) {
return (punctation_marks.indexOf(text.split("")[text.split("").length-1]) != -1)?text.split("").slice(0,text.split("").length-1).reverse().join("") + text.split("")[text.split("").length-1] : text.split("").reverse().join("");
}
}
редактировать: используя node.nodeType
на самом деле не помогает, и вот почему:
Imaginge следующие HTML -
<td class="gensmall">
Last visit was: Sat Mar 31, 2012 10:50 am
<br>
<a href="./search.php?search_id=unanswered">View unanswered posts</a> | <a href="./search.php?search_id=active_topics">View active topics</a>
</td>
если бы я использовал nodeType
, только текст a
элемент изменится, но не ("последний посещать....")
4 ответов
просто найдите текстовые узлы:
var element = document.getElementById('whatever'), text = '';
for (var i = 0; i < element.childNodes.length; ++i)
if (element.childNodes[i].nodeType === 3)
text += element.childNodes[i].textContent;
редактировать - если вы хочу текст в потоковых ("дочерних") узлах, и (как теперь очевидно) вы используете jQuery:
$.fn.allText = function() {
var text = '';
this.each(function() {
$(this).contents().each(function() {
if (this.nodeType == Node.TEXT_NODE)
text += this.textContent;
else if (this.nodeType == Node.ELEMENT_NODE)
text += $(this).allText();
});
});
return text;
};
подождите, и я проверю это: -) (кажется, работает)
этот код достигает того же результата, что и два других ответа, но более выразительным, функциональным способом. The filter
и map
методы массива поддерживаются во всех современных браузерах (IE9 и выше).
бросая это туда, так как другие ответы немного устарели к настоящему времени.
var content = Array.prototype.filter.call(element.childNodes, function (element) {
return element.nodeType === Node.TEXT_NODE;
}).map(function (element) {
return element.textContent;
}).join("");
текст элемента также является отдельным узлом. Рассмотрим этот фрагмент кода:
<span>
Some text
<span>Inner text</span>
More text
<span>More inner text</span>
Even more text
</span>
что вы имеете в виду, когда говорите, что хотите текст элемента? Только прямые дети?
тогда этот фрагмент кода кода может помочь:
for (var element in elements) {
if (element.nodeType == Node.TEXT_NODE) {
// do something
}
}
в дополнение к ответам, таким как Pointy, обработка символа новой строки для <br/>
можно сделать так:
txt = '';
for (var i = 0; i < element.childNodes.length; ++i)
if (element.childNodes[i].nodeType == 3) {
txt += element.childNodes[i].textContent;
} else if (element.childNodes[i].nodeType == 1) {
name = element.childNodes[i].nodeName || element.childNodes[i].tagName || '';
if (name.toUpperCase() == 'BR') {
txt += '\n';
}
}
return txt;