使用间距检索内部文本

Question

I want to extract text out of an arbitrary block of HTML. Naive attempt:

$('<div><p>Some</p>Inner<div>Text</div></div>').text()

This gives SomeInnerText , but I want Some Inner Text

What is a better way to extract text out of HTML, while maintaining some concept of the visual structure with which the HTML would be rendered?

In the example above, new lines between block elements would be great & spaces could be a sort of "flattened" output.

Answer 1

您可以在脚本中插入“＆nbsp”：

$('<div><p>Some&nbsp;</p>Inner&nbsp;<div>Text</div></div>').text();

Answer 2

Well, you can extend jQuery to do that:

$.fn.textRespectingBlocks = function() {
    return this.map(function() {
        var $this = $(this);
        var display = $this.css('display');
        var isBlock = display !== 'none' && display !== 'inline' && display !== 'inline-block' && display !== 'inline-flex' && display !== 'inline-table';
        var childText = Array.prototype.map.call(this.childNodes, function(node) {
            if (node.nodeType === 1) {
                return $(node).textRespectingBlocks();
            }

            if (node.nodeType === 3) {
                return node.nodeValue;
            }

            return '';
        }).join('');

        return isBlock ? ' ' + childText + ' ' : childText;
    }).get().join('');
};

Do a .replace(/^\\s+|\\s+$|\\s(?=\\s)/g, '') on the result, if you like.

Answer 3

Use a regular expression to inject spaces before closing tags:

$('<div><p>Some</p>Inner<div>Text</div></div>'.replace(/</g, ' <')).text();

Fiddle: http://jsfiddle.net/mattdlockyer/uau6S/

Answer 4

Simply adding the spaces yourself will do the trick. However, due to the variations in the way that html is parsed by different browsers, this may result in variations of white space across browsers.

$('<div> <p>Some</p> Inner <div>Text</div></div>').text()