Question

在以下示例中：

<div id="mainDiv">
  <h1>The <span class="bold">title</span></h1>
  some text
  <p>and again</p>
  <p>another text.</p>
</div>

我正在尝试将所有文本都放在一个字符串中。当我执行$('#mainDiv').text()时，它会将文本返回为The titlesome textand againanother text。

在这种情况下，我希望在子元素中的单词之间有空格。所以我非常接近：

if ($('#mainDiv').find("*").length >= 1) {
  $('#mainDiv').find("*").each(function () {
    sFullText = sFullText + $(this).text().trim().replace(/\s\s+/g, ' ') + ' ';
  });
}

现在的结果是：The titlesome textand again another text。

因此，当所有文本都在子元素中时，这是有效的，但如果某些文本在mainDiv中则不行。（该页面及其内容是动态的，因此我不知道mainDiv中的具体元素是什么）

Answer 1

使用此处的jQuery插件：http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/

jQuery.fn.justtext = function() {
    return $(this)  .clone()
            .children()
            .remove()
            .end()
            .text();
};

// ...

var sFullText = $('#mainDiv').justtext();
if ($('#mainDiv').find("*").length >= 1) {
    $('#mainDiv').find("*").each(function () {
        sFullText = sFullText + ' ' + $(this).text().trim().replace(/\s\s+/g, ' ');
    });
}

Answer 2

您可以尝试自己的代码，但使用正则表达式将一个或多个空白字符\s（检查this definition）替换为单个空格' '。像这样：

$("#mainDiv").text().replace(/\s+/g, ' ')

您可以查看this jsfiddle上的示例。

Answer 3

我相信当你压扁你的HTML时你的问题存在：

<div id="mainDiv" style="display:none;"><h1>The <span class="bold">title</span></h1>some text<p>and again</p><p>another text.</p></div>

<div id="result"></div>

$("#result").html($("#mainDiv").text());

使用jQuery获取带有子元素的div文本

3 个答案: