Javascript textcontain 获取所有 html 标签文本以及 script 标签文本

Question

我的目标是计算 html 页面中的所有单词以及计算 html 页面中的固定单词，问题是使用该函数脚本标签文本也会得到计数，所以我如何从计算关键字中删除脚本标签。我这段代码MSO_ContentTable是id 0f div标签。如果有的话，也请给我关于 jquery 的任何其他解决方案。

function CountWord(keyword) {

    var word = keyword.toUpperCase(),
        total = 0,
        queue = [document.getElementById('MSO_ContentTable')],
        curr, count = 0;

    while (curr = queue.pop()) {
        var check = curr.textContent;

        if (check != undefined) {

            for (var i = 0; i < curr.childNodes.length; ++i) {

                if (curr.childNodes[i].nodeName == "SCRIPT") {
                    // do nothing
                }
                else {
                    switch (curr.childNodes[i].nodeType) {
                        case 3: // 3
                            var myword = curr.childNodes[i].textContent.split(" ");

                            for (var k = 0; k < myword.length; k++) {
                                var upper = myword[k].toUpperCase();

                                if (upper.match(word)) {
                                    count++;
                                    wc++;
                                }
                                else  if((upper[0] >= 'A' && upper[0] <= 'Z') ||
                                         (upper[0] >= 'a' && upper[0] <= 'z') ||
                                         (upper[0] >= '0' && upper[0] <= '9')) {
                                    wc++
                                }                                    
                            }
                        case 1: // 1
                            queue.push(curr.childNodes[i]);
                    }
                }
            }
      }
}

谢谢另一个问题是我如何删除没有显示属性的标签？

Answer 1

在您的代码中:

> queue = [document.getElementById('MSO_ContentTable')],
> curr, count = 0;
> 
> while (curr = queue.pop()) {

getElementById 只会返回单个节点，因此不需要将其放入数组中，也不需要稍后弹出它:

curr = document.getElementById('MSO_ContentTable');
if (curr) {
  // do stuff

.

>    var check = curr.textContent;

并非所有浏览器都支持 DOM 3 Core textContent 属性，您需要提供替代方案，例如innerText，例如:

// Get the text within an element
// Doesn't do any normalising, returns a string
// of text as found.
function getTextRecursive(element) {
  var text = [];
  var self = arguments.callee;
  var el, els = element.childNodes;

  for (var i=0, iLen=els.length; i<iLen; i++) {
    el = els[i];

    // May need to add other node types here
    // Exclude script element content
    if (el.nodeType == 1 && el.tagName && el.tagName.toLowerCase() != 'script') {
      text.push(self(el));

    // If working with XML, add nodeType 4 to get text from CDATA nodes
    } else if (el.nodeType == 3) {

      // Deal with extra whitespace and returns in text here.
      text.push(el.data);
    }
  }
  return text.join('');
}

.

>    if (check != undefined) {

鉴于检查始终是一个字符串(即使使用 textContent 或 insideText 而不是上述函数)，针对 undefined 进行测试似乎并不合适。另外，我不明白为什么在循环子节点之前完成此测试。

无论如何，上面的getText函数将返回没有脚本元素的文本内容，因此您可以使用它来获取文本，然后根据需要使用它。您可能需要标准化空白，因为不同的浏览器将返回不同的数量。

PS。我应该注意 arguments.callee 在 ES5 严格模式下受到限制，因此如果您打算使用严格模式，请将该表达式替换为对该函数的显式调用。

编辑

要排除不可见的元素，您需要测试每个元素以查看其是否可见。 仅测试元素，不要测试文本节点，就好像它们的父元素不可见一样，文本也不可见。

请注意，以下内容尚未经过广泛测试，但至少适用于 IE 6 和最新的 Firefox、Opera 和 Chrome。请在更广泛使用之前进行彻底测试。

  // The following is mostly from "myLibrary"
  // <http://www.cinsoft.net/mylib.html>
  function getElementDocument(el) {
    if (el.ownerDocument) {
      return el.ownerDocument;
    }
    if (el.parentNode) {
      while (el.parentNode) {
        el = el.parentNode;
      }
      if (el.nodeType == 9 || (!el.nodeType && !el.tagName)) {
        return el;
      }

      if (el.document && typeof el.tagName == 'string') {
        return el.document;
      }
      return null;
    }
  }


  // Return true if element is visible, otherwise false
  //    
  // Parts borrowed from "myLibrary"
  // <http://www.cinsoft.net/mylib.html>
  function isVisible(el) {
    if (typeof el == 'string') el = document.getElementById(el);

    var doc = getElementDocument(el);
    var reVis = /\bhidden\b|\bnone\b/;
    var styleObj, isVis; 

    // DOM compatible
    if (doc && doc.defaultView && doc.defaultView.getComputedStyle) {
      styleObj = doc.defaultView.getComputedStyle(el, null);

    // MS compatible
    } else if (el.currentStyle) {
      styleObj = el.currentStyle;
    }

    // If  either visibility == hidden || display == none
    // then element is not visible
    return !reVis.test(styleObj.visibility + ' ' + styleObj.display);
  }