1. ホーム
  2. javascript

[解決済み] JavaScriptを使用してHTML要素を含まない純粋なテキストを取得する方法は?

2022-05-08 12:38:43

質問

HTMLに以下のような1ボタンとテキストを記述しています。

function get_content(){
   // I don't know how to do in here!!!
}

<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

ユーザがボタンをクリックすると、そのボタンに対応する <p id='txt'> が期待通りの結果になります。

<p id='txt'>
// All the HTML element within the <p> will be disappear
I am working in ABC company.
</p>

JavaScriptの関数の書き方を教えてください。

ありがとうございました。

解決方法は?

[2017-07-25] 非常にハチャメチャな解決策であるにもかかわらず、これが受け入れられ続けているので、私は以下のものを取り入れています。 ガビ のコードを組み込み、私自身のコードは悪い例として残しています。

// my hacky approach:
function get_content() {
  var html = document.getElementById("txt").innerHTML;
  document.getElementById("txt").innerHTML = html.replace(/<[^>]*>/g, "");
}
// Gabi's elegant approach, but eliminating one unnecessary line of code:
function gabi_content() {
  var element = document.getElementById('txt');
  element.innerHTML = element.innerText || element.textContent;
}
// and exploiting the fact that IDs pollute the window namespace:
function txt_content() {
  txt.innerHTML = txt.innerText || txt.textContent;
}
.A {
  background: blue;
}

.B {
  font-style: italic;
}

.C {
  font-weight: bold;
}
<input type="button" onclick="get_content()" value="Get Content (bad)" />
<input type="button" onclick="gabi_content()" value="Get Content (good)" />
<input type="button" onclick="txt_content()" value="Get Content (shortest)" />
<p id='txt'>
  <span class="A">I am</span>
  <span class="B">working in </span>
  <span class="C">ABC company.</span>
</p>