Find position of HTML tag content

Question

I have task, and can't find out how to make it.

So, i have such string:

<td class="class1">
 <span class="class1"></span>
</td>
<td class="class1">
 <span>0</span>
</td>
<td class="class1">
 <span class="class1">1</span>
</td>
<td class="class1">
 <span class="class1">0</span>
</td>

I need to find the index of each span tag content in string.

When you say position do you mean what index in the source the span tag starts at? — dmikester1, Feb 27 '19 at 20:40
Possible duplicate of [How to check whether a string contains a substring in JavaScript?](https://stackoverflow.com/questions/1789945/how-to-check-whether-a-string-contains-a-substring-in-javascript) — Russ J, Feb 27 '19 at 20:41
Developer advice: if you need to use HTML as string and/or regex on HTML, you're doing it wrong. Consider using an HTML parser. — Nino Filiu, Feb 27 '19 at 20:57
@dmikester1, i want to replace content of span with some other values. — Yura Lukashchuk, Feb 27 '19 at 21:05
@NinoFiliu, agree with you, but in this task i have such conditions. — Yura Lukashchuk, Feb 27 '19 at 21:06
yes, there are much much easier methods that looking for the index of each span — dmikester1, Feb 27 '19 at 21:07
@YuraLukashchuk if your goal is to replace the content inside the span tags, please include those details in your original post. That will help people out in answering your question. — dmikester1, Feb 27 '19 at 21:19
@YuraLukashchuk If all you are wanting to do is replace the content inside the span tags, you have no need to find the index of all the span tags. A simple for loop setting the textContent of each span is all you need similar to what Scott posted. — dmikester1, Feb 27 '19 at 21:26

score 0 · Answer 1 · answered Feb 27 '19 at 21:03

I don't know why you need to do this and it really smells like a bad idea to manipulate HTML as string, but hey, if you need some code, here you go:

const needle = '<span';
const haystack = `<td class="class1">
  <span class="class1"></span>
</td>
<td class="class1">
  <span>0</span>
</td>
<td class="class1">
  <span class="class1">1</span>
</td>
<td class="class1">
  <span class="class1">0</span>
</td>`;
const indices = (new Array(haystack.length))
  .fill()
  .map((_,i) => i)
  .filter(i => haystack.substr(i,needle.length)==needle);

console.log(indices);

Scott Marcus · Answer 2 · 2019-02-27T21:17:35.960

If you have an actual String, then we can take that an load it up into a temporary element to turn it into DOM nodes. Then, we can query the temporary container and get the index quite easily:

let myString = `<td class="class1">
   <span class="class1"></span>
 </td>
 <td class="class1">
   <span>0</span>
 </td>
 <td class="class1">
   <span class="class1">1</span>
 </td>
 <td class="class1">
   <span class="class1">0</span>
 </td>`;
 
 let tempElement = document.createElement("tr");
 tempElement.innerHTML = myString; // Parse the string as HTML into the row
 let spans = tempElement.querySelectorAll("span"); // Gather up the spans
 
 for(var i = 0; i < spans.length; i++){
   console.log("The span at index " + i + " has text of: " +spans[i].textContent);
 }

If you don't have a String, but instead just have those elements as part of your page, the process is the same, just without setting up the temporary container element:

let spans = document.querySelectorAll("span"); // Gather up the spans
 
 for(var i = 0; i < spans.length; i++){
   console.log("The span at index " + i + " has text of: " +spans[i].textContent);
      spans[i].textContent = "Whatever you want";
 }

<table>
  <tr>
    <td class="class1">
     <span class="class1"></span>
    </td>
    <td class="class1">
      <span>0</span>
    </td>
    <td class="class1">
      <span class="class1">1</span>
    </td>
    <td class="class1">
      <span class="class1">0</span>
    </td>
  </tr>
</table>

From the comments above, it looks like he just wants to replace the html in the span. So inside the for loop, you could put something like `spans[i].innerHTML = 'new content';` — dmikester1, Feb 27 '19 at 21:12
@dmikester1 There is no HTML in the span, it's text, so `.textContent` should be used. But, the OP has given us no indication of what he intends to do, he asks how to get the index and that's what I'm showing. — Scott Marcus, Feb 27 '19 at 21:14
Aw, didn't realize that about the HTML. In the comments above he says " i want to replace content of span with some other values." — dmikester1, Feb 27 '19 at 21:16

Find position of HTML tag content

2 Answers2