Extract inner html of children tags

Question

Facing some issues while extracting all inner HTML of a tag including those which are direct children as well as indirect children, i.e. inner HTML of some other tags that are children of the parent div.

For example, given the below HTML,

<div class = "ace_text">
    <div class = "ace_line">
        <span class = "ace-keyword"> rule_1 </span>
        some_sample_rule_1
    </div>
    <div class = "ace_line">
        <span class = "ace-keyword"> rule_2 </span>
        some_sample_rule_2
    </div>
    <div class = "ace_line">
        <span class = "ace-keyword"> rule_3 </span>
        some_sample_rule_3
    </div>
</div>

I want to extract exactly the following as a string:

rule_1
some_sample_rule_1
rule_2
some_sample_rule_2
rule_3
some_sample_rule_3

Answer 1

You didn't show us what you tried and why it failed, but it should be as simple as this:

Update: And if by "exactly the following" you also mean the additional spaces and line breaks, I added a regex replacement in the second console log.

console.log($('.ace_text').text());

console.log($('.ace_text').text().replace(/(^\s+)/mg, ''));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "ace_text">
    <div class = "ace_line">
        <span class = "ace-keyword"> rule_1 </span>
        some_sample_rule_1
    </div>
    <div class = "ace_line">
        <span class = "ace-keyword"> rule_2 </span>
        some_sample_rule_2
    </div>
    <div class = "ace_line">
        <span class = "ace-keyword"> rule_3 </span>
        some_sample_rule_3
    </div>
</div>

Answer 2

if you want to get the text inside the tag, use:

$('.ace-keyword').text();

if you want to get all the HTML, use:

$('.ace_line').html();

Docs:

• Text: http://api.jquery.com/text/
• Html: http://api.jquery.com/html/