jQuery/Cssでdivのテキストをフォーマットする方法

Question

divから、サイトからコピーしたテキスト（例：Wikipedia）を表示したいとします。このテキストには、コンピュータがwikipediaのテキストをコピーするタグは厳密に含まれていなければなりません。

解決策はテキストの書式設定の一種を設定することだと思いますが、わかりません。

Thisです（[OK]を押してください）。しかし、コードにテキストを貼り付けたくないので、テキストエリアにテキストを貼り付ける必要があります。

実際には、このJsfiddleのテキストエリアにWikipediaのものを貼り付けようとすると、結果が恐ろしく、すべてのhtmlタグで表示されます。

HTML：

<div id="faketxt" contenteditable></div> 
<button id='btn'>OK</button> 
<button class="fontStyle" onclick="document.execCommand('bold',false,null);" title="Bold Highlighted Text"><b>B</b> 
    </button> 
     <button class="fontStyle" onclick="document.execCommand('underline',false,null);"><u>U</u> 
    </button> <br> 

<div id='boxes'> 
</div> 

CSS：

#faketxt { 
    -moz-appearance: textfield-multiline; 
    -webkit-appearance: textarea; 
    border: 1px solid gray; 
    height: 28px; 
    overflow: auto; 
    padding: 2px; 
    resize: both; 
    width: 400px; 
} 

.fakes{ 
    width: 150px; 
    height: 300px; 
    font-size: 10px; 
    border-style: solid; 
    display:inline-block; 
    float: left; 
} 

#boxes{ 
    display : flex; 
    display:inline-block; 
} 

のjQuery：

$('#btn').click(function() { 
    var primo = document.getElementById('faketxt'); 
    var wordLimit = 130; 
    var words = primo.innerHTML.replace(/(<([^>]+)>)/ig,"").split(/\s/); 
    if (words.length) { 
    var count = 0; 
    var div = createDiv(); 
    var bold = false; 
    words.forEach(function(word) { 
     if (++count > wordLimit) { 
     count = 1; 
     div = createDiv(); 
     } 
     if (div.innerHTML) { 
     div.append(' '); 
     } 

     if (word.indexOf('<b>') != -1) { 
     bold = true; 
     } 

     if (bold) { 
     $(div).html($(div).html() + '<b>' + 
      word + '</b>'); 
     } else { 
     $(div).html($(div).html() + 
      word); 
     } 

     if (word.indexOf('</b>') != -1) { 
     bold = false; 
     } 
    }); 
    } 
}); 

function createDiv() { 
    div = document.createElement('div'); 
    div.className = 'fakes'; 
    document.getElementById('boxes').append(div); 
    return div; 
} 

Answer 1

innerHTMLやjQueryの$.html()要素の（HTMLを含む）コンテンツを引っ張ってきます。しかし、textContentまたはjqueryの$.text()はテキストを取得します。

var words = primo.innerHTMLの代わりに、var words = primo.textContentまたはvar words = $(primo).text()を試してみましたか？

Answer 2

が 言葉を使用してみてください= primo.textContent.replace（/（<^>] +） >）/ ig、 ""）。split（/ \ s /）; の代わりに words = primo.innerHTML.replace（/（）[] +）>）/ ig、 ""）の代わりに、split（/ \ s /）;

Answer 3

ソースのinnerHTMLを取得するのではなく、javascriptまたはJQuery text（）関数を使用してテキストコンテンツを取得するだけです。

したがって、jQueryを使用している場合は、words変数を次のように初期化してください。

var words = $(primo).text().split(/\s/);