Aktualisierung der angezeigten Textmenge basierend auf dem Eingabebereich

Question

Ich schreibe eine einfache JavaScript-Bibliothek, um die Textmenge (d. H. Anzahl der Wörter) in einem section Element basierend auf dem HTML5-Eingabebereichsregler zu aktualisieren.

Ich habe eine Version, die für ein einzelnes Element funktioniert, aber nicht für mehrere p Elemente innerhalb einer section.

HTML

<section> 
    <p>Text example:</p> 

    <section data-range="true"> 
    <input type="range"> 
     <p>Contemporary web applications utilize a Representational State Transfer (REST) software architectural schema through the combination of front and back-end model-view-controller (MVC) and routing frameworks. The implementation of a MVC framework on the front-end helps to create the effect of a seamless single page application where data is asynchronously processed by the server, and updated in the view.</p> 

     <p>The controller on the front-end is responsible for communicating with the server via HTTP requests. Data objects on the front-end are usually encapsulated in JavaScript Object Notation (JSON) and asynchronously sent to the server for performing various logic, or RESTful operations identified by Uniform Resource Identifiers (URIs) in HTTP requests.</p> 
    </section> 
</section> 

JS

/* updateInnerText 
* Update inner text based on range section 
* @param the event elemenet (range input) 
* @param range value, number of words to display 
*/ 
function updateInnerText(el, length) { 
    var paragraphs = []; 

    for (var p = 0; p < numParagraphs; p++) { 
     var ob = {}; 
     ob['text'] = el.srcElement.parentNode.children[p + 1].attributes["data-text"].value; 
     ob['numWords'] = el.srcElement.parentNode.children[p + 1].attributes["data-text"].value.split(' ').length; 
     paragraphs.push(ob); 
    } 
    // update on the DOM 
    for (var x = numParagraphs; x >= 0; x--) { 
     var diff = fullText.split(' ').length - length; 
     diff = +diff + +length; 
     el.srcElement.parentNode.children[x].innerHTML = paragraphs[x - 1]['text'].substring(0, diff); 
    } 
} 

Update:

Hier ist ein JSbin mit der ursprünglichen Arbeitsversion.

Hier ist eine aktualisierte JSbin versucht mehrere Absätze.

Answer 1

Hier ist eine modifizierte Version Ihrer Funktion, die rekursiv über ein Element und seinen Teilbaum arbeitet. Es entfernt Textknoten, die sich außerhalb der Wortzählung befinden (bei Bedarf den Grenztextknoten aufteilen).

Diese aktualisierte JSbin sollte tun, was Sie wollen.

// updateInnerText :: Event, Number -> undefined 
function updateInnerText(el, length) { 
    var curNode  = null, 
     curWords  = [], 
     nodesToRemove = [], 
     remainingWords = length, 
     wordsSoFar  = 0, 
     walker   = document.createTreeWalker(el, NodeFilter.SHOW_TEXT); 

    while (curNode = walker.nextNode()) { 
     curWords  = getWords(curNode.textContent); 
     remainingWords = length - wordsSoFar; 

     if (remainingWords <= 0) { 
      nodesToRemove.push(curNode); 
     } else if (remainingWords >= curWords.length) { 
      wordsSoFar += curWords.length; 
     } else { 
      wordsSoFar = length; 
      nodesToRemove.push(curNode.splitText(remainingWordsCharCount())); 
     } 
     curNode = walker.nextNode(); 
    } 

    nodesToRemove.forEach(function (n) { n.remove(); }); 

    // getWords :: String -> [String] 
    function getWords(text) { 
     return text.split(/\s+/ig) 
        .map(function (s) { return s.trim(); }) 
        .filter(Boolean); 
    } 

    // remainingWordsCharCount :: undefined -> Number 
    function remainingWordsCharCount() { 
     return curWords.slice(0, remainingWords).join(' ').length; 
    } 
}