Javascriptの正規表現 - 文字列のHTMLからdivのIDを取得

Question

は、次のコードを考えてみましょう：

const content = "<div id='x'><h2>Lorem Ipsum</h2> <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>" 

let ids = content.match(/id='(.*?)'/g).map((val) => { 
    return val.replace(/id='/g,''); 
}) 

をそして、私はconsole.log(ids)を行うときに - 私はこの'x\''ような出力を得るが、私は唯一の'x'を必要としています。私はどのようにその結果を達成するのだろうか、正規表現のシンボルを無作為に変更しようとしました。なぜなら正規表現はまったくわからないからです。

jqueryしないでください。事前にありがとう

Answer 1

const content = "<div id='x'><h2>Lorem Ipsum</h2> <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>" 
 

 
let ids = content.match(/id='(.*?)'/g).map((val) => { 
 
    return val.replace(/id='/g,'').replace("'",''); 
 
}) 
 

 
console.log(ids)

Answer 2

ドットを使用すると "。"それはすべてを意味していますがeverithingが、「この答えは正規表現（を必要とせずにHTML の文字列からDOM情報を取得するためのアプローチを説明し

const content = "<div id='x'><h2>Lorem Ipsum</h2> <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>" 

let ids = content.match(/id='([^' .*?])'/g).map((val) => { 
    return val.replace(/id='([^' .*?])'/g,'$1'); 
}) 

console.log(ids) 

Answer 3

文字を検索しますDOMの解析時にバグやエラーが発生しやすい）。

HTMLの文字列からDocumentFragmentを作成するには、単純なライブラリ（html-fragment）を使用しています。その文字列はメモリ内の単純なDOMツリーになるので、属性のquerySelectorAll要素を使用できます。次に、要素をマップしてIDの配列を取得できます。

const content = "<div id='x'><h2>Lorem Ipsum</h2> <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>"; 
 

 
const fragment = HtmlFragment(content); 
 
let ids = Array 
 
    .from(fragment.querySelectorAll('[id]')) 
 
    .map(el => el.id); 
 

 
console.log(ids);

<script src="https://unpkg.com/html-fragment@1.1.0/lib/html-fragment.min.js"></script>