Question

是否有js / npm模块从HTML获取渲染输出（不解析HTML）。比方说，我有以下HTML：

<div class="st_view recipe-tab ingredients st_view_first st_view_active" style="position: absolute; left: 0px;">
          <h1 class="tab-hint">
            Yields: <span itemprop="recipeYield" class="tab-hint-value">2 Servings</span>
          </h1>
<ol>
  <li itemprop="ingredients">1 <strong> Banana Nut Muffin Bar</strong>
  </li>
  <li itemprop="ingredients">3 tablespoons <strong>Vanilla Milkshake Protein Powder</strong>
  </li>
  <li itemprop="ingredients">1
    <sup>1</sup>⁄
    <sub>2</sub> tablespoons banana, mashed
  </li>
  <li itemprop="ingredients">
    <sup>1</sup>⁄
    <sub>2</sub> tablespoon unsweetened almond milk
  </li>
  <li itemprop="ingredients">1 teaspoon walnuts, crushed
  </li>
  <li itemprop="ingredients">
    <sup>1</sup>⁄
    <sub>4</sub> teaspoon banana extract
  </li>
  <li itemprop="ingredients">
    <sup>1</sup>⁄
    <sub>4</sub> teaspoon zero-calorie sweetener
  </li>
  <li itemprop="ingredients">Pinch of cinnamon 
  </li>
</ol>                                                                                                          </div>

这将呈现以下输出：

无论如何都要访问上面的渲染线（没有实际解析HTML）？

例如：var lineSix = getLineSixFromRenderedHTML(html);

编辑：我想在节点js服务器端环境中执行此操作（不使用jquery），我不想解析html以通过单个元素来构造我的输出。我只想访问渲染的行（而不是HTML）。

Answer 1

This是你需要的，虽然我不太确定你的真实字符串是多么复杂

var str = `your-very-long-html-string`;

var htmlToText = require('html-to-text');
var text = htmlToText.fromString(str, {
    wordwrap: 130
});
console.log(text);

结果

YIELDS: 2 SERVINGS
 1. 1 Banana Nut Muffin Bar
 2. 3 tablespoons Vanilla Milkshake Protein Powder
 3. 1 1⁄ 2 tablespoons banana, mashed
 4.  1⁄ 2 tablespoon unsweetened almond milk
 5. 1 teaspoon walnuts, crushed
 6.  1⁄ 4 teaspoon banana extract
 7.  1⁄ 4 teaspoon zero-calorie sweetener
 8. Pinch of cinnamon

Answer 2

如果你为每个li标签提供一个id，然后使用jquery获取标签内的html，你就可以这样做。

例如：

<li itemprop="ingredients" id="ingredient_6">1
    <sup>1</sup>⁄
    <sub>2</sub> tablespoons banana, mashed
</li>

然后使用jQuery：

var lineSix = $('#ingredient_6').html();

Answer 3

OP要求这个例子。

它使用jQuery，主要是为了简单起见，如果你不想要jQuery，你必须查看他们的源代码并重新创建我猜的功能。请注意，如果在此处运行，您将获得稍微不稳定的行为，因为跑步者将脚本和样式添加到错误的位置。

＆＃13;

console.log($("html").find("*").toArray()[0]);

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>
hello
</div>
</body>
</html>

＆＃13;

Answer 4

您可以使用.innerHTML和.outerHTML属性的组合。使用示例HTML，您可以执行以下操作：

var list = document.querySelector('ol');
list.innerHTML;
list.outerHTML;

List返回一个DOM节点，该节点具有children属性。要访问<ol>列表中的第6项，您只需使用：

var 6thChild = list.children[5];
6thChild.innerHTML;
6thChild.outerHTML;

获取呈现的HTML输出

4 个答案: