Tener un código como este:

<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>

Es posible tomar el HTML interno usando el siguiente código:

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

¿Hay alguna forma de separar que digamos una coma el texto de cada etiqueta?

Salida esperada:

My Title,Text 1,test text 3,An example final text
0
cottinR 23 feb. 2018 a las 01:39

4 respuestas

La mejor respuesta

Aquí hay una solución de una línea 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 feb. 2018 a las 22:56

Esto recorre todos los elementos en #myid y si la entrada de texto es mayor que 0, se agrega al resultado y luego le da una alerta, ¿es esto lo que desea?

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>

Editar: considere usar la solución de Boris en su lugar.

1
Luicy 22 feb. 2018 a las 22:59

Esta agarra todo dentro del selector dado.

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 feb. 2018 a las 23:02

No directamente con innerText. Lo que tendría que hacer es iterar a través del HTML recursivamente hasta llegar a la última hoja que solo tiene texto, y luego devolver cada uno de ellos.

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>

Como notará, esta función también incluye nuevas líneas (\n) y espacios, que puede filtrar si lo desea.

La función básicamente pasa por cada nodo. Si es un TextNode, lee el texto y lo agrega al fragmento. Si no lo es, pero tiene hijos, recurrirá a cada uno de ellos. Si no es ninguno, solo devuelve los fragmentos existentes.

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 feb. 2018 a las 22:58