從<input>計算字數量？

Question

以下代碼根據用戶輸入的字符數量將文本轉換爲相等的段落。

輸入框可以計算每個段落的字數而不是基於字符數量嗎？

JSFiddle

如果能夠提供一個更新的小提琴請，將不勝感激，因爲我還是新的編碼。

謝謝！

$(function() { 
 
    $('select').on('change', function() { 
 
    //Lets target the parent element, instead of P. P will inherit it's font size (css) 
 
    var targets = $('#content'), 
 
     property = this.dataset.property; 
 
    targets.css(property, this.value); 
 
    sameheight('#content p'); 
 
    }).prop('selectedIndex', 0); 
 
}); 
 
var btn = document.getElementById('go'), 
 
    textarea = document.getElementById('textarea1'), 
 
    content = document.getElementById('content'); 
 
    chunkSize = 100; 
 
    
 
btn.addEventListener('click', initialDistribute); 
 
content.addEventListener('keyup', handleKey); 
 
content.addEventListener('paste', handlePaste); 
 

 
function initialDistribute() { 
 
    custom = parseInt(document.getElementById("custom").value); 
 
    
 
    chunkSize = (custom>0)?custom:chunkSize; 
 
    var text = textarea.value; 
 
    while (content.hasChildNodes()) { 
 
    content.removeChild(content.lastChild); 
 
    } 
 
    rearrange(text); 
 
} 
 

 
function rearrange(text) { 
 
    var chunks = splitText(text, false); 
 
    chunks.forEach(function(str, idx) { 
 
    para = document.createElement('P'); 
 
    para.classList.add("Paragraph_CSS"); 
 
    para.setAttribute('contenteditable', true); 
 
    para.textContent = str; 
 
    content.appendChild(para); 
 
    }); 
 
    sameheight('#content p'); 
 
} 
 

 
function handleKey(e) { 
 
    var para = e.target, 
 
    position, 
 
    key, fragment, overflow, remainingText; 
 
    key = e.which || e.keyCode || 0; 
 
    if (para.tagName != 'P') { 
 
    return; 
 
    } 
 
    if (key != 13 && key != 8) { 
 
    redistributeAuto(para); 
 
    return; 
 
    } 
 
    position = window.getSelection().getRangeAt(0).startOffset; 
 
    if (key == 13) { 
 
    fragment = para.lastChild; 
 
    overflow = fragment.textContent; 
 
    fragment.parentNode.removeChild(fragment); 
 
    remainingText = overflow + removeSiblings(para, false); 
 
    rearrange(remainingText); 
 
    } 
 
    if (key == 8 && para.previousElementSibling && position == 0) { 
 
    fragment = para.previousElementSibling; 
 
    remainingText = removeSiblings(fragment, true); 
 
    rearrange(remainingText); 
 
    } 
 
} 
 

 
function handlePaste(e) { 
 
    if (e.target.tagName != 'P') { 
 
    return; 
 
    } 
 
    overflow = e.target.textContent + removeSiblings(fragment, true); 
 
    rearrange(remainingText); 
 
} 
 

 
function redistributeAuto(para) { 
 
    var text = para.textContent, 
 
    fullText; 
 
    if (text.length > chunkSize) { 
 
    fullText = removeSiblings(para, true); 
 
    } 
 
    rearrange(fullText); 
 
} 
 

 
function removeSiblings(elem, includeCurrent) { 
 
    var text = '', 
 
    next; 
 
    if (includeCurrent && !elem.previousElementSibling) { 
 
    parent = elem.parentNode; 
 
    text = parent.textContent; 
 
    while (parent.hasChildNodes()) { 
 
     parent.removeChild(parent.lastChild); 
 
    } 
 
    } else { 
 
    elem = includeCurrent ? elem.previousElementSibling : elem; 
 
    while (next = elem.nextSibling) { 
 
     text += next.textContent; 
 
     elem.parentNode.removeChild(next); 
 
    } 
 
    } 
 
    return text; 
 
} 
 

 
function splitText(text, useRegex) { 
 
    var chunks = [], 
 
    i, textSize, boundary = 0; 
 
    if (useRegex) { 
 
    var regex = new RegExp('.{1,' + chunkSize + '}\\b', 'g'); 
 
    chunks = text.match(regex) || []; 
 
    } else { 
 
    for (i = 0, textSize = text.length; i < textSize; i = boundary) { 
 
     boundary = i + chunkSize; 
 
     if (boundary <= textSize && text.charAt(boundary) == ' ') { 
 
     chunks.push(text.substring(i, boundary)); 
 
     } else { 
 
     while (boundary <= textSize && text.charAt(boundary) != ' ') { 
 
      boundary++; 
 
     } 
 
     chunks.push(text.substring(i, boundary)); 
 
     } 
 
    } 
 
    } 
 
    return chunks; 
 
}

#text_land { 
 
    border: 1px solid #ccc; 
 
    padding: 25px; 
 
    margin-bottom: 30px; 
 
} 
 

 
textarea { 
 
    width: 95%; 
 
} 
 

 
label { 
 
    display: block; 
 
    width: 50%; 
 
    clear: both; 
 
    margin: 0 0 .5em; 
 
} 
 

 
label select { 
 
    width: 50%; 
 
    float: right; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    font-family: monospace; 
 
    font-size: 1em; 
 
} 
 

 
h3 { 
 
    margin: 1.2em 0; 
 
} 
 

 
div { 
 
    margin: 1.2em; 
 
} 
 

 
textarea { 
 
    width: 100%; 
 
} 
 

 
button { 
 
    padding: .5em; 
 
} 
 

 
p { 
 
    /*Here the sliles for OTHER paragraphs*/ 
 
} 
 

 
#content p { 
 
    font-size: inherit; 
 
    /*So it gets the font size set on the #content div*/ 
 
    padding: 1.2em .5em; 
 
    margin: 1.4em 0; 
 
    border: 1px dashed #aaa; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <h3>Import Text below, then press the button</h3> 
 
    <textarea id="textarea1" placeholder="Type text here, then press the button below." rows="5"> 
 
    </textarea> 
 
    <input style="width:200px;" id="custom" placeholder="Custom Characters per box"> 
 
    
 
    <br> 
 

 
    <button style="width:200px;" id="go">Divide Text into Paragraphs</button> 
 
</div> 
 
<div> 
 
    <h3 align="right">Divided Text Will Appear Below:</h3> 
 
    <hr> 
 
    <div id="content"></div> 
 
</div>

Answer 1

這個怎麼樣？它使用jQuery的，但你在最初提交使用的庫，我希望那不會是一個問題：

HTML

<textarea id="input"></textarea> 
<br/> 
<button id='divide'>Divide</button> 
<div id="paras"></div> 

CSS

#input { 
    resize: none; 
    height: 200px; 
    width: 100%; 
} 

JS

$(function() { 

    $("#divide").click(function() { 

    var text = $("#input").val(); 
    var wpp = 10 // words per paragraph 
    var words = text.split(" "); 
    var paras = []; 
    for (i = 0; i < words.length; i += wpp) { 
     paras.push(words.slice(i, i + wpp).join(" ")); 
    } 
    $.each(paras, function(i, para) { 
     $("#paras").append("<p>" + para + "</p>"); 
    }); 
    }); 

}) 

JSFiddle