web-dev-qa-db-ja.com

要素間にスペースを含むjQuerytext（）の代わりに？

コンテナに任意の本文があります。私はそれを制御していないので、その構造がわかりません。しかし、このようなもの：

<div id='content-area'>
  <h1>Heading</h1>
  <p>A paragraph or two</p>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

これは説明のための単純な例であり、実際には、さらに多くのアイテムやテーブルなどのネストされたものを含めることができます。

すべてのテキストを引き出して、使用されている単語を処理したいと思います。次のjQueryを使用してテキストを取得しています。

$('#content-area').text()
// HeadingA paragraph or twoitem 1item 2

問題は、タグ付けされた各アイテムの間にスペースがないことです。 ドキュメント は言う：

ブラウザごとにHTMLパーサーが異なるため、返されるテキストは改行やその他の空白で異なる場合があります。

そして、私の検索はすべて、空白を削除するための結果を引き出しているようです。すべてのテキストを引き出して要素間のスペースを維持する方法はありますか？ブラウザー内で発生する必要があるため、JavaScript風のメソッド。

javascriptjqueryhtmlwhitespace
15
Rothrock

ネストされた構造が不明な場合は、すべての要素に空白を追加できます

https://jsfiddle.net/3y2yLexv/1/

$( "*" ).each(function( index ) {
   $( this ).append(' ');
});

var str = $('#content-area').text();
//Of course you have to trim duplicated blank spaces.
str = str.replace(/\s\s+/g, ' ');
$('#new').text(str);
11
Trike

JQueryはtextContentプロパティを使用していると思います。これにより、文字列をそのようにフォーマットできます。代わりにできることは、textNodeを探してツリーをトラバースし、それをString/Arrayに追加することです。

例えば：

function getText(domElement) {
  var root = domElement;
  var text = [];

  function traverseTree(root) {
    Array.prototype.forEach.call(root.childNodes, function(child) {
      if (child.nodeType === 3) {
        var str = child.nodeValue.trim();
        if (str.length > 0) {
          text.Push(str);
        }
      } else {
        traverseTree(child);
      }
    });
  }
  traverseTree(root);
  return text.join(' ');
}

var text = getText(document.getElementById('content-area'));
document.getElementById('results').innerHTML = text;
<div id='content-area'>
  <h1>Heading</h1>
  <p>A paragraph or two</p>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>
<pre id="results"></pre>

空白文字を含むテキストノードがたくさんあります。それらを除外するために私がしたことは、テキストノードのコンテンツをトリミングしてから、空白の横に何かがあるかどうかを確認することです。どの空白文字が表示されるかを確認し、それらを除外する方がよい場合があります。

3
MinusFour

これがどのような場合でも機能するかどうかはわかりません。私の解決策は、生のhtmlからタグ、空白、新しい行をフィルタリングする正規表現です。

$("#content-area").html().replace(/([\s\n]*<[^>]*>[\s\n]*)+/g," ")

http://jsfiddle.net/limond/mrnctqcv/1/

編集：もちろん、これは、ユーザーが見ることができないhtmlを含むタグを回避できる場合にのみ機能します（例：<script>...</script>）

2
limond

JQueryのeachメソッドを利用してアイテムを収集し、文字列連結を使用して間隔を含めることができます。

大まかな例として、これらの線に沿ったもの：

$(function(){
    var output = "";
    $( "li" ).each( function( index, element ){
        output += $(this).text() + " ";
    });
    $('#output').html(output);
});

必要なものを変数にキャッシュすることで表示される出力を自由に確認してください。これにより、DOMへの書き込みは1回だけになります。

http://jsfiddle.net/bq50s8eb/

編集：

構造が何であるかわからないが、それらがすべて単一のdiv内にあると確信している場合は、jQueryのユニバーサルセレクターを使用できます。

$(function(){
    var output = "";
    $( "#content-area *" ).each( function( index, element ){
        output += $(this).text() + " ";
    });
    $('#output').html(output);
});

http://jsfiddle.net/bq50s8eb/1/

2
Nicholas Hazel

Cssにwhite-space：preを追加することでこれを解決しました。 jqueryを使用して要素を動的に追加する場合、次のように実行できます。

$('<a/>') 
.attr("style", 'white-space:pre;')
.text('    X    ');
0
Anand Tuli