получить текст элемента без детей в JavaScript - PullRequest
Новая
       24

получить текст элемента без детей в JavaScript

11 голосов
/ 31 марта 2012

Как получить текст элемента без дочерних элементов?Ни 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("");
    }
}

edit : использование 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 мог быизменить, но не сам td ("последний визит ....")

Ответы [ 4 ]

17 голосов
/ 31 марта 2012

Просто найдите текстовые узлы: 

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;

edit - если вы хотите текст в дочерних ("дочерних") узлах и (как есть)очевидно) вы используете 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;
};

Держитесь, и я это проверю :-) (похоже, работает)

4 голосов
/ 24 мая 2015

Этот код достигает того же результата, что и два других ответа, но более выразительным и функциональным способом.Методы массива 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("");
3 голосов
/ 31 марта 2012

Текст элемента также является отдельным узлом. Рассмотрим этот кусок кода: 

<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
    }
}
1 голос
/ 18 августа 2015

В дополнение к ответам типа 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;
...