jquery text() 删除html标签并合并文本

Question

我正在尝试使用 jQuery 从带有 .text() 的 div 中获取文本。这可行，但 div 用作内联编辑器（tinymce），因此其中有一些标记，例如：

<p>sometext<span id="_mce_caret" data-mce-bogus="true"><strong>sometext2</strong></span><br data-mce-bogus="1"></p>

span基本上是换行，但是在获取文本的时候，把所有的html标签都去掉了（这是必须的），但是文本也合并在一起成为一个“字”：

sometextsometext2

虽然应该是：

sometext sometext2

也许甚至是：

一些文本。 sometext2.

如何做到这一点？

这是我已经使用的代码：

var textareaValues = jQuery('.desc-meta').map(function(){
   return jQuery(this).text();
}).get();
console.log(textareaValues);

谢谢

编辑 有关丢失的更多信息： 我有多个 div（5 个或 6 个）：

<div class="desc-meta">
    <p>sometext<span id="_mce_caret" data-mce-bogus="true">
    <strong>sometext2</strong></span><br data-mce-bogus="1"></p>
</div>

<div class="desc-meta">
    <p>This is some extra sometext<span id="_mce_caret" data-mce-bogus="true">
    <strong>Some extra sometext2</strong></span><br data-mce-bogus="1"></p>
</div>

<div class="desc-meta">
    <p>sometext<span id="_mce_caret" data-mce-bogus="true">
    <strong>sometext2</strong></span><br data-mce-bogus="1"></p>
</div>

这些div中的文本需要“合并”成1个字符串，所以上面的div应该是：

sometext sometext2. This is some extra sometext Some extra sometext2. sometext sometext2.

这将存储在隐藏的输入中。 所以没有html标签，但保留单词/句子之间的空格。

这是我目前拥有的 jquery：

var descText = '';
jQuery('#registration-form').find('.desc-meta').each(function(){

    if (jQuery.trim(jQuery(this).text()) != "") {
        var textareaValues = jQuery('.desc-meta').map(function(){
            return jQuery(this).text();
        }).get().join(' ');

        console.log(textareaValues);

        descText = textareaValues.join(', ');

    }

});
jQuery('#description').val(descText);

Answer 1

如果我没记错的话，你的 .desc-meta 就是包装器。所以你应该给我们下面的 HTML

<div class="desc-meta">
   <p>sometext<span id="_mce_caret" data-mce-bogus="true"><strong>sometext2</strong></span><br data-mce-bogus="1"></p>
</div>

否则该类在您的代码中的什么位置？

因此，您不会从该包装 div 中的元素循环。因此，您只是将desc-meta 的内容作为字符串获取。实际上，您需要该类中元素的内容。所以我们使用find(*) 来获取包装器div 中的所有元素。

var textareaValues = jQuery('.desc-meta').find('*').map(function(){
   return jQuery(this).text();
}).get();
console.log(textareaValues);

在这里，我们不是循环遍历容器，而是遍历容器中的任何元素，在您的情况下，我们循环遍历 p、span 和 strong

最终结果是这样的：

["sometextsometext2", "sometext2", "sometext2", ""]

注意，第一个是第一个p的内容，也就是p内的所有内容，最后一个空值就是break。这就是你想要做的，但效果并不好（特别是如果你不知道有多少元素，如果你知道，那么你只会从上面得到 [1] 和 [2]，然后工作完成。

---

更好的方法是获取 html，然后自己添加空格。

var textareaValues = jQuery('.desc-meta').map(function(){
   return jQuery(this).html();
}).get();

上面我们得到了html，现在我们需要在每个元素的开头添加空格。

$str = textareaValues[0].split('<').join(' <');

对于多个 div 容器我们如下

var str = textareaValues.join('').split('<').join(' <');

如果你只是想console.log($str) 最终结果是丑陋的，但假设你想将它添加到页面中。

$('body').append( $(str).text() )

最终结果是空格。

查看demo here

Answer 2

如果你想在单词之间留一个空格，只需连接你的空格：

var textareaValues = jQuery('.desc-meta').map(function(){
   return jQuery(this).text();
}).get().join(" ");
console.log(textareaValues);