html - 从 html 中提取空格折叠的文本，因为它将被呈现

Question

我使用 html 解析器 (Neko) 来提取 html 文档的自由文本。由于我对文本的语义感兴趣，因此我必须特别注意浏览器中出现的单词之间的距离。

例如：

<H1>My
title</H1>
<P>Hello
                World</P>

呈现为：

My title
Hello world

在<pre>标签内包含段落或带有样式时：

<style>
p { white-space:pre; }
</style>

会导致：

My title
Hello
                    World

我想区别对待，因为“你好”在语义上与“世界”这个词没有联系。正如其他帖子中所说 - 解析和渲染之间存在差异。我对渲染后出现的单词之间的联系很感兴趣，因为显然解析不会像浏览器上显示的那样折叠空格。

有没有办法在浏览器上读取时从 html 中提取空格折叠的文本？

Answer 1

我以前没有使用过 Neko，但您需要访问元素的样式并查看white-space属性是否设置为pre、pre-wrap或 preline。

1. 如果是preor pre-wrap，则将文本中的任何空白组替换为单个空格。

2. 否则 if pre-line，仅用单个空格替换空格/制表符组。

3. 否则，请勿修改文本。

这是一个使用 JQuery 的示例：JSFiddle

jQuery

function getRenderedText(obj) {
    var text = obj.text();
    var renderedText;
    switch (obj.css('white-space')) {
        case 'pre':
        case 'pre-wrap':
            renderedText = text;
            break;
        case 'pre-line':
            renderedText = text.replace(/[ \t]+/,' ');
            break;
        default:
            renderedText = text.replace(/\s+/,' ');
    }
    return renderedText;
}

Answer 2

看看这个关于 w3schools 的基本信息

http://www.w3schools.com/cssref/pr_text_white-space.asp

并通过示例更好地解释：

http://css-tricks.com/almanac/properties/w/whitespace/

我还认为您必须将 hello 放在 1 中<p>，将 world 放在另一个中，效果才能起作用。否则他们都向右走。