スパンをスパン列に分割した

Question

スパンにラップされたテキストブロックを配列に分割する必要があります。

だから、現在、私はそうそれは含めていない<span>を占めると</span>しかし

var s = [ 
    "<span class="hoverable">c", 
    "<span class="hoverable">o", 
    "<span class="not-hoverable">o",...] 

を閉じ分割するs.split(/<\/?span>/);を試みた

var s = [ 
    "<span class="hoverable">c</span>", 
    "<span class="hoverable">o</span>", 
    "<span class="not-hoverable">o</span>"]; 

必要

var s = ` 
    <span class="hoverable">c</span> 
    <span class="hoverable">o</span> 
    <span class="not-hoverable">o</span>`; 

持っています閉鎖スパン。

Answer 1

いつもregexpの質問がHTMLやXMLの領域に行き渡るとき、regexpは正しいツールではないことをお勧めします。使用している言語で使用可能な適切なHTMLパーサーを使用してください。あなたは、ブラウザで作業していると、値がの内部にある場合は、常にDOMを使用することができます

let s = ` 
 
    <span class="hoverable">c</span> 
 
    <span class="hoverable">o</span> 
 
    <span class="not-hoverable">o</span>`; 
 
let d = document.createElement('div'); 
 
d.innerHTML = s; 
 
let result = Array.from(d.children).map(e => e.outerHTML); 
 
console.log(result);

Answer 2

：JavaScriptの場合には（varと文字列のテンプレート構文の使用によって暗示）素子。そうでなければ、文字列を持っていてもDOMを動的に使うことができます。最後に、正規表現を使用できます。

ここまでのラウンドです：

var s = ' ' + 
 
    '<span class="hoverable">c</span>' + 
 
    '<span class="hoverable">o</span>' + 
 
    '<span class="not-hoverable">o</span> '; 
 
var r2 = s.match(/<span(.*?)>(.*?)<\/span>/gm); 
 
console.log("using regular expressions"); 
 
console.log(r2); 
 

 
function findWithDOM() { 
 
    console.log("using DOM"); 
 
    var elements = [].slice.call(document.querySelectorAll('#myDiv span')); 
 
    console.log(elements); 
 
} 
 

 
function findWithDynamicDOM() { 
 
    console.log("using Dynamic DOM"); 
 
    var element = document.createElement("div"); 
 
    element.innerHTML=s; 
 
    var elements = [].slice.call(element.querySelectorAll('span')); 
 
    console.log(elements); 
 
}

<div id="myDiv"><span class="hoverable">c</span> 
 
    <span class="hoverable">o</span> 
 
    <span class="not-hoverable">o</span> 
 
</div> 
 
<input id='btnFind' onclick='findWithDOM()' value='Find With DOM' type="button" /> 
 
<input id='btnFind' onclick='findWithDynamicDOM()' value='Find Dynamic DOM' type="button" />