当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How can I make an array of some words of HTML?

问题描述:

Here is my HTML:

<div class="tags_autoloaderBox">

<div>

<div>

<span>PHP</span>

<p>there is some explanations</p>

</div>

</div>

<div>

<div>

<span>HTML</span>

<p>there is some explanations</p>

</div>

</div>

<div>

<div>

<span>CSS</span>

<p>there is some explanations</p>

</div>

</div>

<div>

<div>

<span>MySQL</span>

<p>there is some explanations</p>

</div>

</div>

</div>

And I need to make a array of all those tag names. Something like this:

var arr = ['PHP','HTML','CSS','MySQL'];

So I need to parse the HTML. Is doing that possible by either JS or jQuery?

网友答案:

You can use Array.from(), object destructuring to return textContent property of span DOM element

let res = Array.from(document.querySelectorAll(".tags_autoloaderBox span"), ({textContent}) => textContent);
console.log(res);
<div class="tags_autoloaderBox">
    <div><div>
        <span>PHP</span>
        <p>there is some explanations</p>
    </div></div>
    <div><div>
        <span>HTML</span>
        <p>there is some explanations</p>
    </div></div>
    <div><div>
        <span>CSS</span>
        <p>there is some explanations</p>
    </div></div>
    <div><div>
        <span>MySQL</span>
        <p>there is some explanations</p>
    </div></div>
</div>
网友答案:

This jquery should work to get the array:

var array = $(".tags_autoloaderBox span").map(function (){
    return $(this).text();
}).get();

To convert that to a delimited string, you could do this:

var str = array.join(" | ");

jsFiddle

jQuery map documentation

MDN array join documentation

网友答案:

Using querySelectorAll you can select all the spans within the div and just create an array and push these span contents into it

check this snippet

var div = document.querySelector('.tags_autoloaderBox');
var spans = div.querySelectorAll('span');
var arr = [];
var str="";
spans.forEach(function(span) {
  arr.push(span.innerHTML);
});
console.log(arr);
console.log(arr.join("| "));
<div class="tags_autoloaderBox">
  <div>
    <div>
      <span>PHP</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>HTML</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>CSS</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>MySQL</span>
      <p>there is some explanations</p>
    </div>
  </div>
</div>
网友答案:

Here's a straight JavaScript solution that gathers up the <span> elements, loops through them and puts their text content into an array:

// Create an empty array to hold the results:
var results = [];

// Gather all the relevant span elements and loop through them:
document.querySelectorAll(".tags_autoloaderBox span").forEach(function(element){
  // Push each element's text content into the array
  results.push(element.textContent);
});
// Output as needed:
console.log(results.join(" | "));
<div class="tags_autoloaderBox">
  <div>
    <div>
      <span>PHP</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>HTML</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>CSS</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>MySQL</span>
      <p>there is some explanations</p>
    </div>
  </div>
</div>
网友答案:

Well, it looks like it is already answered, but I wrote it out and thought I would share. This will work if your browser does not support querySelectorAll...

window.addEventListener('load', function () {
        var arr = getSpanTagsArr;
        // Do whatever you want with the arr here.
    });
    function getSpanTagsArr() {
        var tagHolders = document.getElementsByClassName('tags_autoloaderBox');
        var tags = [];
        for (var i = 0; i < tagHolders.length; i++) {
            var spans = tagHolders[i].getElementsByTagName('span');
            for (var j = 0; j < spans.length; j++) {
                var tag;
                if (spans[i].textContent) {
                    val = spans[j].textContent;
                }
                else if (spans[j].innerText) {
                    val = spans[j].innerText;
                }
                else {
                    val = spans[j].innerHTML;
                }
                if (tags.indexOf(val) == -1) {
                    tags.push(val);
                }
            }
        }
        return tags;
    }
分享给朋友:
您可能感兴趣的文章:
随机阅读: