如何在文本框中的htmltext中获取所有标签

Question

I have webpage html source inside a textarea having id="textArea1" .

This Html code is containing some "p" tags. I want to get list of all p tags which lie in textArea of above code

Answer 1

I want to get list of all p tags

The text inside a <textarea> is a string, not sure what exactly you mean by list if you want substrings inside <p> you can use split() function...

$('#textArea1').change(function(){ // or any other event you want
 var text= $(this).val();
 var count= text.split('<p>').length-1;
 console.log(count);
});

check this JSFiddle

Update:

as per comment, you can get the text inside occurances of <p></p> (assuming the html string inside textarea is in a valid format) as follows:

$('#textArea1').change(function(){
 var text= $(this).val();
 var strings= text.split('<p>');
 for(i=1;i<strings.length;i++){
    strings[i]= strings[i].split('</p>')[0];
    console.log(strings[i]);
 }
});

JSFiddle

Answer 2

You cannot count the paragraph elements or the value inside the textarea as you could find them inside a seperate element. Textarea is not meant for such purpose.

You can try counting all the p tags inside some other element like a seperate div which gets populated by the textarea value.

$('#textArea1').keyup(function () {
   $('div').html($(this).val());
   var totalPs = 0;
   $('div').find('p').each(function () {
     totalPs++;
   });
});

This would try counting the p elements.

It would:

1. Handle an event on the textarea with the id textArea .

2. Append the value of the textarea to the element (div here).

3. Create a variable with value 0.

4. Find p elements inside the element and then iterate it n times; n would be the number of paragraph elements.

5. Increment the value.

You can use the value as the result and then get that inside the document or in the console.