JavaScript: как получить текст от всех потомков элемента, игнорируя скрипты?

мой текущий проект включает в себя сбор текстового контента из элемента и всех его потомков на основе предоставленного селектора.

например, при поставке селектора #content и запустить против этого HTML:

<div id="content">
  <p>This is some text.</p>
  <script type="text/javascript">
    var test = true;
  </script>
  <p>This is some more text.</p>
</div>

мой скрипт вернется (после небольшой очистки пробелов):

этот текст. var test = true; это еще один текст.

однако мне нужно игнорировать текстовые узлы, которые происходят внутри <script> элементы.

это выдержка из моего текущего кода (технически, он соответствует на основе одного или нескольких предоставленных селекторов):

// get text content of all matching elements
for (x = 0; x < selectors.length; x++) { // 'selectors' is an array of CSS selectors from which to gather text content
  matches = Sizzle(selectors[x], document);
  for (y = 0; y < matches.length; y++) {
    match = matches[y];
    if (match.innerText) { // IE
      content += match.innerText + ' ';
    } else if (match.textContent) { // other browsers
      content += match.textContent + ' ';
    }
  }
}

это немного слишком упрощенно, поскольку он просто возвращает все текстовые узлы внутри элемента (и его потомков), который соответствует предоставленному селектору. Решение, которое я ищу, вернет все текстовые узлы, за исключением тех, которые попадают в <script> элементы. Это не должно быть особенно высокопроизводительным, но мне это нужно в конечном счете быть кросс-браузер совместимый.

Я предполагаю, что мне нужно будет каким-то образом перебирать все дочерние элементы элемента, который соответствует селектору, и накапливать все текстовые узлы, кроме тех, которые находятся внутри <script> элементы; не похоже, что есть какой-либо способ идентифицировать JavaScript, как только он уже свернут в строку, накопленную со всех текстовых узлов.

Я не могу использовать jQuery (по соображениям производительности / пропускной способности), хотя вы, возможно, заметили, что я использую его Двигатель селектора шипения, поэтому логика селектора jQuery доступна.

заранее спасибо за любую помощь!

6
dom javascript string text textnode

2 ответов

function getTextContentExceptScript(element) {
    var text= [];
    for (var i= 0, n= element.childNodes.length; i<n; i++) {
        var child= element.childNodes[i];
        if (child.nodeType===1 && child.tagName.toLowerCase()!=='script')
            text.push(getTextContentExceptScript(child));
        else if (child.nodeType===3)
            text.push(child.data);
    }
    return text.join('');
}

или, если вам разрешено изменить DOM, чтобы удалить <script> элементы (которые обычно не имели бы заметных побочных эффектов), быстрее:

var scripts= element.getElementsByTagName('script');
while (scripts.length!==0)
    scripts[0].parentNode.removeChild(scripts[0]);
return 'textContent' in element? element.textContent : element.innerText;
8

редактировать:

Ну сначала позвольте мне сказать, что я не слишком знаком с Sizzle на его одиноком, jsut в библиотеках, которые его используют... Вот и все..

если бы мне пришлось это сделать, я бы сделал что-то вроде:

var selectors = new Array('#main-content', '#side-bar');
function findText(selectors) {
    var rText = '';
    sNodes = typeof selectors = 'array' ? $(selectors.join(',')) : $(selectors);
    for(var i = 0; i <  sNodes.length; i++) {
       var nodes = $(':not(script)', sNodes[i]);
       for(var j=0; j < nodes.length; j++) {
         if(nodes[j].nodeType != 1 && node[j].childNodes.length) {
             /* recursion - this would work in jQ not sure if 
              * Sizzle takes a node as a selector you may need 
              * to tweak.
              */
             rText += findText(node[j]); 
         }  
       }
    }

    return rText;
}

Я не тестировал ничего из этого, но это должно дать вам идею. Надеюсь, кто-то еще будет трубить с большим направлением : -)

не можете ли вы просто захватить родительский узел и проверить nodeName в цикле... например:

if(match.parentNode.nodeName.toLowerCase() != 'script' && match.nodeName.toLowerCase() != 'script' ) {
    match = matches[y];
    if (match.innerText) { // IE
      content += match.innerText + ' ';
    } else if (match.textContent) { // other browsers
      content += match.textContent + ' ';
    }
}

конечно jquery поддерживает not() синтаксис в селекторах, так что вы могли бы просто сделать $(':not(script)')?

2