来自 document.body.innerHTML 的 javascript HTML答案

【问题标题】：javascript HTML from document.body.innerHTML来自 document.body.innerHTML 的 javascript HTML
【发布时间】：2011-10-04 22:53:47
【问题描述】：

我正在尝试构建一个网页内容的字符串，没有 HTML 语法（可能用空格替换它，所以单词不是全部连词）或标点符号。

所以说你有代码：

    <body>
    <h1>Content:</h1>
    <p>paragraph 1</p>
    <p>paragraph 2</p>

    <script> alert("blah blah blah"); </script>

    This is some text<br />
    ....and some more
    </body>

我要返回字符串：

    var content = "Content paragraph 1 paragraph 2 this is some text and this is some more";

知道怎么做吗？谢谢。

【问题讨论】：

标签： javascript regex parsing

【解决方案1】：

您可以使用innerText 属性（而不是innerHTML，它也返回HTML 标记）：

var content = document.getElementsByTagName("body")[0].innerText;

但是，请注意，这也将包括新行，因此如果您完全按照您在问题中指定的内容，则需要删除它们。

【讨论】：

还要去掉空格：var content = document.getElementsByTagName("body")[0].innerText.replace(/\s*/g, ' ')
唯一的问题是 Firefox 不支持 innerText。
你不需要 RegEx，一个简单的拆分 -> 加入会更有效地完成这项工作。
@patrick dw - 非常好的一点，不知何故让我忘记了。 textContent 属性可以解决这个问题。 @Stoive - 你的正则表达式看起来会在每个字符之间添加一个空格......
@James：是的，我使用(document.body.textContent || document.body.innerText).replace(... 开始了一个解决方案，但textContent 似乎也为您提供了<script> 的内容。之后就失去了兴趣。 :o)

【解决方案2】：

你需要一个 striptags function in javascript 和一个正则表达式来用一个空格替换连续的换行符。

【讨论】：

-1 每个人都急于求助于正则表达式（计算成本高），但存在更有效的解决方案。 “有效”的东西并不总是最好的。
如果您知道用单个空格替换连续空格和换行符的更有效方法，我相信 OP 会感谢您提供它。

【解决方案3】：

有些浏览器支持 W3C DOM 3 Core textContent 属性，或者其他浏览器支持 MS/HTML5 innerText 属性（有些支持两者）。可能脚本元素的内容是不需要的，因此递归遍历 DOM 树的相关部分似乎是最好的：

// 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('');
}

【讨论】：

我不知道，我可以投票给没有附加 jsFiddle 的答案吗？ ;o) Here's the live example 给有兴趣的人。我唯一添加的是：.replace(/\s+/g, ' ') 以提供 OP 想要的输出。我还要注意 arguments.callee 已弃用，目前在“严格模式”下不可用。 +1
@patrick - arguments.callee 在 ES5 中不被弃用（弃用意味着在未来版本中标记为删除），但是它的使用受到限制，因为它在严格模式。
我的理解是今天的“严格模式”会在ECMAScript的下一个版本中成为标准。这不正确吗？
我不知道。 ES5 严格模式代码可能无法在 ES 3 环境中正常运行，反之亦然。我认为在没有长时间弃用和明确声明该意图的情况下，删除 ES 5 中限制的 ES 3 功能实际上是不可能的。我还没有看到这方面的证据。
是的，我可能错了。我以为我在 Wiki for Harmony 中读到了它，但现在我找不到了。我能找到的最接近的东西是from this MDN article “未来的 ECMAScript 版本可能会引入新的语法，并且 ECMAScript 5 中的严格模式应用了一些限制来简化过渡......”未来的版本将要求强制执行严格模式规则，但肯定不建议完全弃用严格模式违规。

【解决方案4】：

您可以尝试使用下面的替换语句

var str = "..your HTML..";
var content = str.replace(/</?[a-zA-Z0-9]+>|<[a-zA-Z0-9]+\s*/>|\r?\n/g," ");

对于您上面提供的 HTML，这将在内容中为您提供以下字符串

   Content:   paragraph 1   paragraph 2    alert("blah blah blah");   This is some text  ....and some more

【讨论】：