JavaScript, как разбить текстовые элементы HTML в массив? - PullRequest
Новая
       35

JavaScript, как разбить текстовые элементы HTML в массив?

0 голосов
/ 24 января 2019

Если у меня есть строка, содержащая элементы html, каков будет эффективный способ создания массива родственных элементов html?

Попытка использовать indexOf с первой буквой открывающего тега «<» и последней из закрывающего тега усложняется, поскольку могут быть дочерние элементы. </p>

Простой пример: 

<p>Hello there</p>

<h1>Thank you</h1>

Заранее спасибо!

Ответы [ 4 ]

0 голосов
/ 24 января 2019

Вы можете использовать это, чтобы получить все тексты от дочерних элементов. 

let nodeList = document.getElementById('stack').querySelectorAll('*');
let list = [];
nodeList.forEach(function(val){
	list.push(val.outerHTML)
})
console.log(list); 
<div id="stack">
 <p>Hello there</p>
 <h1>Thank you</h1>
</div>
0 голосов
/ 24 января 2019

Используя регулярное выражение с методом js split, мы можем извлечь.

Проверьте мой код 

let a = `<p>Hello there</p><p>How r you?</p>

<h1>Thank you</h1>`
let b = a.split(/<[a-zA-Z0-9]*>([^<.*>;]*)<\/[a-zA-Z0-9]*>/gmi).filter(x=>x.trim() !== '')
console.log(b) //['Hello there', 'How r you?', 'Thank you']
0 голосов
/ 24 января 2019

Вы можете использовать регулярные выражения для решения этой проблемы.

Найдите все открывающие и закрывающие теги с помощью регулярных выражений и замените их символом "/" (что-то еще), затем разделите его и затем отфильтруйте ("") с помощью фильтра (Boolean)

Код: 

var elements = [],container = document.getElementById("container");
  for(let i = 0; i < container.children.length; i++)    {                     elements.push(container.children[i].outerHTML.replace(/<\/?[^>]+(>|$)/g, ""));
   }
   
      console.log("plainTextArray = ",elements);




let bodyHtml = document.getElementsByTagName('div')["0"].innerHTML;

let plainTextArray = bodyHtml.replace(/<\/?[^>]+(>|$)/g, "//").split("//").filter(Boolean)

console.log('plainTextArray = ',plainTextArray);
<body>
<div id="container"><p>Hello there</p><h1>Thank you</h1></div>
</body>
0 голосов
/ 24 января 2019

Я верю, что это то, что вы пытаетесь сделать. 

  <div id="container">
    <div>child 1</div> 
    <div>child 2</div> 
    <div>child 3</div> 
  </div>
  <script type="text/javascript">
      let elements = [], container = document.getElementById("container");
      for(let i = 0; i < container.children.length; i++){
          elements.push(container.children[i].outerHTML);
      }
      console.log(elements);
</script>
...