使用 javascript 从 html 页面获取数据

Question

I have some HTML - pretty nasty, but not mine and so I don't have control over it. I need to extract some data from the form, the First name value (ABDIGANI) and the Surname value (AHMED). What is the best way to do this with javascript?

<div class="voffset3"></div>
    <div class="container well panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3">
                    <span class="ax_paragraph">
                        First name
                    </span>
                    <div class="form-group">
                        <div class="ax_h5">
                            ABDIGANI
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <span class="ax_paragraph">
                        Surname
                    </span>
                    <div class="form-group">
                        <div class="ax_h5">
                            AHMED
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

 var x = document.querySelectorAll(".panel-body > div >.col-md-3 > div > div"); x.forEach(myFunction); function myFunction(item, index) { //console.log(item.innerHTML.trim()); if (index===0){ console.log("First name: "+item.innerHTML.trim()); } if (index===1){ console.log("Surname: "+item.innerHTML.trim()); } }

 <div class="voffset3"></div> <div class="container well panel panel-default"> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <span class="ax_paragraph"> First name </span> <div class="form-group"> <div class="ax_h5"> ABDIGANI </div> </div> </div> <div class="col-md-3"> <span class="ax_paragraph"> Surname </span> <div class="form-group"> <div class="ax_h5"> AHMED </div> </div> </div> </div> </div> </div> </div>

Answer 2

Check this

const firstName = document.querySelector('.row .form-group div').textContent.trim();

const surname = document.querySelector('.row > div:last-child .form-group div').textContent.trim();

note : Its better to change html according to functionality needs, like if you need firstname then you must keep an id attribute to div which is having first name, same goes to surname. then select those fields using id selector, because even if you change html page structure in future, functionality will not get effected.

Check below for reference on how the html should actually be(just to make sure you know it, but the solution you are seeking is above in first two lines) eg:

<div class="voffset3"></div>
    <div class="container well panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3">
                    <span class="ax_paragraph">
                        First name
                    </span>
                    <div class="form-group">
                        <div class="ax_h5" id="firstNameField">
                            ABDIGANI
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <span class="ax_paragraph">
                        Surname
                    </span>
                    <div class="form-group">
                        <div class="ax_h5" id="surnameField">
                            AHMED
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

You could consider HTML in most cases well structured. Try this the following snippet.

Edit: did a change due to the first comment.

Edit: if you have more than one rows, you should use

document.querySelectorAll('.container > .panel-body > .row');

and fetch the pairs for each found element as below.

const markers = ['First name', 'Surname'];
const mRx = [new RegExp(markers[0]), new RegExp(markers[1])];

function findMarker(element) {
    for(let i = 0; i < mRx.length; i++) {
        if(element.innerHTML.match(mRx[i])) {
            return markers[i];
        }
    }
    return null;
}

function findValue(el) {
    return el.parentElement.querySelector('.form-group > div').innerHTML.trim();
}

const pairs = [... document.querySelectorAll('.ax_paragraph')]
    .map(el => {
        return {el: el, mk: findMarker(el)};
    })
    .filter(n => n.mk !== null)
    .map(o => {
        return {key: o.mk, value: findValue(o.el)};
    });
console.log(pairs);

Answer 4

If you can't edit the HTML, you can use the XPATH for Example.

Answer 5

document.querySelector('.form-group > div').textContent but without modifying the html there is no way to distinguish first name and surname.