HTML로 된 문장을 단어로 나눕니다 (인라인 HTML 그대로 유지)

Question

HTML로 된 문장을 단어로 분리하고 텍스트 내용이 손상되지 않도록 인라인 HTML 태그를 남기려면 자바 스크립트를 사용하는 방법을 찾고 있습니다. 구두점은 가장 가까운 단어의 일부로 간주 될 수 있습니다. 정규식을 사용하고 싶습니다. 아마 문장을 나누는 데 preg_split()을 사용하고 싶습니다. 나는 다음과 끝내고 싶은, 바람직하게는

A word, <a href='#' title=''>words within tags should remain intact</a>, so here's 
<b>even more</b> <u>words</u> 

:

[0] => A 
[1] => word, 
[2] => <a href='#' title=''>words within tags should remain intact</a>, 
[3] => so 
[4] => here's 
[5] => <b>even more</b> 
[6] => <u>words</u> 

---

내가 (내가 Bobince' answer를 읽고 즐길 정규식 HTML을 구문 분석에 대한 논의에 대해 알고 여기에 예를 다음과 같습니다 : -P),하지만 html 태그에 속성을 가하지 않고 문장의 단어를 분할해야합니다. Regex와 다른 방식으로 JS로이 작업을 수행하는 방법을 알지 못합니다. 물론, 대안이 있다면, 비슷한 결과를 얻기 위해 그들을 적응시키는 것보다 더 행복 할 것입니다. :-)

---

편집 : 내가 이것에 대해 유래에 비슷한 질문을 검색하지만, 이러한 나를 위해 상자를 선택하지 않습니다. 원근감을 조금 더 표현하려면 :

• splitting-up-html-code-tags-and-content : 대상을 그대로두고 원하는 인라인 HTML을 나눕니다.
• php-regex-to-match-outside-of-html-tags : HTML 태그 내 에서조차 HTML 스 니펫의 모든 텍스트 노드를 타겟팅합니다. 그러나 실제로는 HTML 요소 외부의 공간 만 대상으로하고 싶습니다 (HTML 태그로 둘러싸인 텍스트 노드 내의 공백 제외).

Answer 1

당신은 다음 코드 사용할 수 있습니다 텍스트 노드를 취하고 단어로 분할, 그것은 모든 자식 노드를 반복

function splitIntoWords(div) { 
 
    function removeEmptyStrings(k) { 
 
    return k !== ''; 
 
    } 
 
    var rWordBoundary = /[\s\n\t]+/; // Includes space, newline, tab 
 
    var output = []; 
 
    for (var i = 0; i < div.childNodes.length; ++i) { // Iterate through all nodes 
 
    var node = div.childNodes[i]; 
 
    if (node.nodeType === Node.TEXT_NODE) { // The child is a text node 
 
     var words = node.nodeValue.split(rWordBoundary).filter(removeEmptyStrings); 
 
     if (words.length) { 
 
     output.push.apply(output, words); 
 
     } 
 
    } else if (node.nodeType === Node.COMMENT_NODE) { 
 
     // What to do here? You can do what you want 
 
    } else { 
 
     output.push(node.outerHTML); 
 
    } 
 
    } 
 
    return output; 
 
} 
 

 
window.onload = function() { 
 
    var div = document.querySelector("div"); 
 
    document.querySelector("pre").innerText = 'Output: ' + JSON.stringify(splitIntoWords(div)); 
 
}

<!-- Note you have to surround your html with a div element --> 
 
<div>A word, <a href='#' title=''>words within tags should remain intact</a>, so here's 
 
    <b>even more</b> <u>words</u> 
 
</div> 
 
<pre></pre>

을 (당신은 텍스트 노드부터 안전하게 작업을 수행 할 수 있습니다 자녀를 포함하지 않음).

이것은 대부분의 문제를 처리합니다. 이렇게하면 text<span>Test</span>과 같은 HTML이 위의 대답과 달리 ["text", "<span>Test</span>"]으로 나옵니다.

<span>There are</span>: 4 words의 결과는 ["<span>There are</span>", ":" /* Extra colon */, "4", "words"] (결과는 같지만 확실한 지 확실하지 않음)으로 실패 할 수 있습니다.

중첩 된 요소로 매우 안전하다고 생각합니다.

Answer 2

이것은 가능하지만 순수 정규식 솔루션을 사용하면 몇 가지 단점이 있습니다. 가장 쉬운 방법은 중첩 HTML입니다. 내가 보여주고 자하는 해결책은이 문제를 해결하기 위해 몇 가지 참조를 사용하지만 복잡한 중첩 된 HTML을 얻는다면 이상한 방법으로 실패 할 것입니다.

/(?:<(\w+)[^>]*>(?:[\w+]+(?:(?!<).*?)<\/\1>?)[^\s\w]?|[^\s]+)/g 

Regex Demo

정규식은 일을 얻기 위해 참조하는 음의 표정 비하인드를 다시 사용합니다. 요구 사항에 따라 역 참조를 제거 할 수 있습니다. 역 참조는 중첩 태그 지원에 도움이됩니다.

JSFiddler Example - 예를 들어 콘솔 출력을 확인하십시오.

여기 JS 피들러의 출력의 당신이 당신을 위해 일을 수정해야합니다 사용하는 경우 당신에 따라

[ 
    "A", 
    "word,", 
    "<a href='#' title=''>words within tags should remain intact</a>,", 
    "so", 
    "here's", 
    "<b>even more</b>", 
    "<u>words</u>" 
] 

있어 (I 출력을 조금 포맷). 나는 공간이 아닌 단어를 생각했지만, 당신은 다른 기준을 가질 수 있습니다.

시작 HTML 태그가 단어 끝 부분에 있으면 제대로 가져올 수 없습니다. 즉. test<span>something else</span>.