주어진 DOM 요소에 대한 자바 스크립트 단어 수

Question

예를 들어 div 내부의 단어를 계산하는 방법이 있는지 궁금합니다.

<div id="content"> 
hello how are you? 
</div> 

는 그 다음 JS 기능 4.

의 정수이 가능 반환 한 : 우리가 같은 사업부가 있다고? 양식 요소로이 작업을 수행했지만 비 형식 작업에서는 수행 할 수 없습니다.

아이디어가 있으십니까?

g

Answer 1

당신이 DIV는당신이 KISS 할 수있는, 그 안에 텍스트가가는 것을 알고있는 경우 :

var count = document.getElementById('content').innerHTML.split(' ').length; 

사업부는 HTML 태그를 가질 수 있다면, 당신이있어

function get_text(el) { 
    ret = ""; 
    var length = el.childNodes.length; 
    for(var i = 0; i < length; i++) { 
     var node = el.childNodes[i]; 
     if(node.nodeType != 8) { 
      ret += node.nodeType != 1 ? node.nodeValue : get_text(node); 
     } 
    } 
    return ret; 
} 
var words = get_text(document.getElementById('content')); 
var count = words.split(' ').length; 

이 jQuery 라이브러리가 일을 달성하기 위해 사용하는 것과 같은 논리입니다 : 텍스트 노드를 찾고 아이를 통과해야 할 것 그것의 text() 기능의 효과. jQuery는이 경우 필요하지 않은 꽤 멋진 라이브러리입니다. 그러나 DOM 조작이나 AJAX를 많이 사용하고 있다면 확인해 볼 수 있습니다.

편집 :

코멘트에 검보에서 언급 한 바와 같이

, 우리는 단어로 두 개의 연속 된 공간을 계산 것입니다 위의 문자열을 분할하는 방법. 그런 종류의 일을 기대한다면 (그리고 그렇지 않더라도) 단순한 공백 문자 대신 정규 표현식으로 분리하여 피하는 것이 가장 좋습니다. 대신 위의 분할 하 고의, 염두에 유지, 당신은 같이해야합니다 :

var count = words.split(/\s+/).length; 

우리가 split 함수에 전달하는 것에있는 유일한 차이점입니다.

Answer 2

document.deepText= function(hoo){ 
    var A= []; 
    if(hoo){ 
     hoo= hoo.firstChild; 
     while(hoo!= null){ 
      if(hoo.nodeType== 3){ 
       A[A.length]= hoo.data; 
      } 
      else A= A.concat(arguments.callee(hoo)); 
      hoo= hoo.nextSibling; 
     } 
    } 
    return A; 
} 

나는 단어

function countwords(hoo){ 
    var text= document.deepText(hoo).join(' '); 
    return text.match(/[A-Za-z\'\-]+/g).length; 
} 
alert(countwords(document.body)) 

Answer 3

파올로 Bergantino의 두 번째 솔루션을 시작하거나 공백으로 끝나는 빈 문자열 또는 문자열에 대한 잘못된 - 이것도 대해 상당히 엄격한 것. 다음은 수정입니다 :

var count = !s ? 0 : (s.split(/^\s+$/).length === 2 ? 0 : 2 + 
    s.split(/\s+/).length - s.split(/^\s+/).length - s.split(/\s+$/).length); 

설명 : 문자열이 비어 경우, 제로 단어가있다; 문자열에 공백 만 있으면 단어가 없습니다. 그렇지 않으면, 문자열의 시작과 끝에서 공백 그룹을 제외하고 공백 그룹의 수를 계산하십시오.

Answer 4

또는 당신은이 작업을 수행 할 수 있습니다 : 그것은 적어도이 두 단어로 "단어를"계산하지 않습니다

string_var.split(/\s+/).length 

보다 더 나은 방법처럼

function CountWords (this_field, show_word_count, show_char_count) { 
    if (show_word_count == null) { 
     show_word_count = true; 
    } 
    if (show_char_count == null) { 
     show_char_count = false; 
    } 
    var char_count = this_field.value.length; 
    var fullStr = this_field.value + " "; 
    var initial_whitespace_rExp = /^[^A-Za-z0-9]+/gi; 
    var left_trimmedStr = fullStr.replace(initial_whitespace_rExp, ""); 
    var non_alphanumerics_rExp = rExp = /[^A-Za-z0-9]+/gi; 
    var cleanedStr = left_trimmedStr.replace(non_alphanumerics_rExp, " "); 
    var splitString = cleanedStr.split(" "); 
    var word_count = splitString.length -1; 
    if (fullStr.length <2) { 
     word_count = 0; 
    } 
    if (word_count == 1) { 
     wordOrWords = " word"; 
    } else { 
     wordOrWords = " words"; 
    } 
    if (char_count == 1) { 
     charOrChars = " character"; 
    } else { 
     charOrChars = " characters"; 
    } 
    if (show_word_count & show_char_count) { 
     alert ("Word Count:\n" + " " + word_count + wordOrWords + "\n" + " " + char_count + charOrChars); 
    } else { 
     if (show_word_count) { 
      alert ("Word Count: " + word_count + wordOrWords); 
     } else { 
      if (show_char_count) { 
       alert ("Character Count: " + char_count + charOrChars); 
      } 
     } 
    } 
    return word_count; 
} 

Answer 5

string_var.match(/[^\s]+/g).length 

보인다 - [ '단어']보다는 [ '단어']를 사용하십시오.그리고 실제로 재미있는 애드온 로직이 필요하지 않습니다.

Answer 6

Paolo Bergantino의 get_text 함수는 두 자식 노드 사이에 공백이 없을 때 제대로 작동하지 않았습니다. 예 : <h1> 제목 </h1 <p > 단락 </p >은 headingparagraph (단어 사이에 공백이 없음을 알리는 메시지)로 반환됩니다. 따라서 nodeValue에 공백을 추가하면이를 수정합니다. 하지만 텍스트 앞 부분에 공간이 생겼지 만 단어 수를 계산하여 단어를 깎는 기능을 발견했습니다 (플러스에서는 여러 단어를 사용하여 단어를 셉니다). 단어 수 아래 편집 get_text 기능 :

function get_text(el) { 
    ret = ""; 
    var length = el.childNodes.length; 
    for(var i = 0; i < length; i++) { 
     var node = el.childNodes[i]; 
     if(node.nodeType != 8) { 
      ret += node.nodeType != 1 ? ' '+node.nodeValue : get_text(node); 
     } 
    } 
    return ret; 
} 

function wordCount(fullStr) { 
    if (fullStr.length == 0) { 
     return 0; 
    } else { 
     fullStr = fullStr.replace(/\r+/g, " "); 
     fullStr = fullStr.replace(/\n+/g, " "); 
     fullStr = fullStr.replace(/[^A-Za-z0-9 ]+/gi, ""); 
     fullStr = fullStr.replace(/^\s+/, ""); 
     fullStr = fullStr.replace(/\s+$/, ""); 
     fullStr = fullStr.replace(/\s+/gi, " "); 
     var splitString = fullStr.split(" "); 
     return splitString.length; 
    } 
} 

편집

케네 벡의 말씀 카운터가 정말 좋은 것입니다. 그러나 내가 찾은 단어는 내가 필요로하는 단어로 숫자를 포함합니다. 아직도, 그것은 kennebec 's에 쉽게 추가 할 수 있습니다. 그러나 kennebec의 텍스트 검색 기능에는 동일한 문제가 있습니다.

Answer 7

또는 그냥 열심히 일을 Countable.js를 사용)

Answer 8

string_var.match(/[^\s]+/g).length - 1;