web-dev-qa-db-ja.com

JavaScriptを使用してHTML文字列からテキストを抽出する

JS関数を使用して、HTML文字列の内部テキストを取得しようとしています（文字列は引数として渡されます）。コードは次のとおりです。

function extractContent(value) {
    var content_holder = "";

    for(var i=0;i<value.length;i++) {
        if(value.charAt(i) === '>') {
            continue;
            while(value.charAt(i) != '<') {
                content_holder += value.charAt(i);
            }
        }

    }
    console.log(content_holder);
}

extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");

問題は、コンソールに何も印刷されないことです（content_holderは空のままです）。問題は「===」演算子が原因だと思います。

javascripthtmlstringtextextract
16
Toshkuuu

要素を作成し、その中にHTMLを保存し、そのtextContentを取得します。

function extractContent(s) {
  var span = document.createElement('span');
  span.innerHTML = s;
  return span.textContent || span.innerText;
};
    
alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));

ノード間にスペースを入れることができるバージョンがありますが、おそらくブロックレベルの要素のみに必要です：

function extractContent(s, space) {
  var span= document.createElement('span');
  span.innerHTML= s;
  if(space) {
    var children= span.querySelectorAll('*');
    for(var i = 0 ; i < children.length ; i++) {
      if(children[i].textContent)
        children[i].textContent+= ' ';
      else
        children[i].innerText+= ' ';
    }
  }
  return [span.textContent || span.innerText].toString().replace(/ +/g,' ');
};
    
console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>.  Nice to <em>see</em><strong><em>you!</em></strong>"));

console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>.  Nice to <em>see</em><strong><em>you!</em></strong>",true));
42
Rick Hitchcock

1行（より正確には1ステートメント）バージョン：

function extractContent(html) {

    return (new DOMParser).parseFromString(html, "text/html") . 
        documentElement . textContent;

}
18
user663031

textContext は、望ましい結果を得るための非常に優れた手法ですが、DOMをロードしたくない場合があります。したがって、単純な回避策は次の正規表現になります。

let htmlString = "<p>Hello</p><a href='http://w3c.org'>W3C</a>"
let plainText = htmlString.replace(/<[^>]+>/g, '');
2
Mubeen Khan

このregaxを使用してhtmlタグを削除し、内部テキストのみをhtmlに保存します

helloW3cのみがチェックすることを示しています

var content_holder = value.replace(/<(?:.|\n)*?>/gm, '');
2
Ahmer

これを試して：-

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function extractContent(value){
        var div = document.createElement('div')
        div.innerHTML=value;
        var text= div.textContent;            
        return text;
}
window.onload=function()
{
   alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));
};
</script>
</body>
</html>
2
Sharique Ansari