Имея такой код:

<div id="myid">
    <div class="test">
        <h3 class="h3_class">My Title</h3>
        <p class="class_1_p">Text 1</p>
        <p class="Sans-19px">
            test text 3
        </p>
    </div>
    </a>
</div>
<div class="test_light">
    <blockquote class="test_text_final">
        An example final text
    </blockquote>
</div>
</div>

Можно взять внутренний HTML, используя следующий код:

document.querySelector('div#myid').innerText

Есть ли способ отделить текст, скажем запятую, от каждого тега?

Ожидаемый выход:

My Title,Text 1,test text 3,An example final text
0
cottinR 23 Фев 2018 в 01:39

4 ответа

Лучший ответ

Вот одноканальное решение VanillaJS:

var text = document.querySelector('div#myid').innerText;

console.log(text.split('\n').filter(x => x).join(', '));
<div id="myid">
    <div class="test">
        <h3 class="h3_class">My Title</h3>
        <p class="class_1_p">Text 1</p>
        <p class="Sans-19px">
            test text 3
        </p>
    </div>
    <div class="test_light">
        <blockquote class="test_text_final">
            An example final text
        </blockquote>
    </div>
</div>
0
Boris Lobanov 22 Фев 2018 в 22:56

Это перебирает все элементы в #myid, и если ввод текста больше 0, он добавляет результат, а затем выдает предупреждение, это то, что вы хотите?

var result = "";

$("#myid *").each(function(index) {
  if($(this).text().length > 0) {
      result += $(this).text().replace(/(\r\n|\n|\r)/gm,"") + ",";
  }
});
alert(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myid">
    <div class="test">
        <h3 class="h3_class">My Title</h3>
        <p class="class_1_p">Text 1</p>
        <p class="Sans-19px">
            test text 3
        </p>
    </div>
    </a>
</div>
<div class="test_light">
    <blockquote class="test_text_final">
        An example final text
    </blockquote>
</div>
</div>

Изменить: попробуйте использовать решение Бориса вместо.

1
Luicy 22 Фев 2018 в 22:59

Этот захватывает все внутри данного селектора.

console.log(document.getElementById("myid").innerText.replace(/\s{2,}/g,', '));
<div id="myid">
    <div class="test">
        <h3 class="h3_class">My Title</h3>
        <p class="class_1_p">Text 1</p>
        <p class="Sans-19px">
            test text 3
        </p>
    </div>
    </a>
</div>
<div class="test_light">
    <blockquote class="test_text_final">
        An example final text
    </blockquote>
</div>
</div>
-1
marmeladze 22 Фев 2018 в 23:02

Не напрямую с innerText. Что вам нужно сделать, так это рекурсивно перебирать HTML-код, пока не дойдете до последнего листа, содержащего только текст, а затем вернуть каждый из них.

const root = document.querySelector('#myid');

const getTexts = (el, chunks = []) => {
  if (el.nodeType === document.TEXT_NODE) {
    return chunks.concat(el.data);
  } else if (el.childNodes.length > 0) {
    return Array.prototype.reduce.call(el.childNodes, (result, child) => getTexts(child, result), chunks);
  }
  
  return chunks;
}

console.log(getTexts(root));
<div id="root">
  <div id="myid">
      <div class="test">
          <h3 class="h3_class">My Title</h3>
          <p class="class_1_p">Text 1</p>
          <p class="Sans-19px">
              test text 3
          </p>
      </div>
  </div>
  <div class="test_light">
      <blockquote class="test_text_final">
          An example final text
      </blockquote>
  </div>
</div>

Как вы заметите, эта функция также включает переводы строки (\n) и пробелы, которые вы можете отфильтровать, если хотите.

Функция в основном проходит через каждый узел. Если это TextNode, он читает текст и добавляет его в чанк. Если это не так, но есть дети, он будет проходить через каждого из детей. Если это не так, он просто возвращает существующие куски.

const root = document.querySelector('#root');

const getTexts = (el, chunks = []) => {
  if (el.nodeType === document.TEXT_NODE) {
    return chunks.concat(el.data);
  } else if (el.childNodes.length > 0) {
    return Array.prototype.reduce.call(el.childNodes, (result, child) => getTexts(child, result), chunks);
  }
  
  return chunks;
}

console.log(
  getTexts(root).map(s => s.trim()).filter(Boolean)
);
<div id="root">
  <div id="myid">
      <div class="test">
          <h3 class="h3_class">My Title</h3>
          <p class="class_1_p">Text 1</p>
          <p class="Sans-19px">
              test text 3
          </p>
      </div>
  </div>
  <div class="test_light">
      <blockquote class="test_text_final">
          An example final text
      </blockquote>
  </div>
</div>
2
samanime 22 Фев 2018 в 22:58