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

我想以不同的方式对待，因为“Hello”在这个问题上并没有语义上与“世界”这个词联系在一起。正如在其他帖子中所说的那样 - 解析和渲染的作用之间存在差异。我对渲染后出现的单词之间的联系感兴趣，因为很明显解析不会像浏览器上显示的那样折叠白色空格。

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

Answer 1

请看一下w3schools的基本信息

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

并通过示例进行了更好的解释：

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

我还认为你必须在1 <p>和世界之间打招呼以使效果起作用。否则他们都会向右走。

Answer 2

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

如果是pre或pre-wrap，请用一个空格替换文本中的任何空格组。
如果pre-line，只用一个空格替换空格/制表符组。
否则，请勿修改文字。

以下是使用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;
}

从html中提取空白折叠文本，因为它将被渲染

2 个答案: