使用 javascript 從 html 頁面獲取數據

Question

我有一些 HTML - 很討厭，但不是我的，所以我無法控制它。 我需要從表單中提取一些數據，名字值 (ABDIGANI) 和姓氏值 (AHMED)。 使用 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

檢查這個

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

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

注意：最好根據功能需要更改 html，例如如果您需要名字，那么您必須為具有名字的 div 保留一個 id 屬性，姓氏也是如此。 然后 select 那些字段使用 id 選擇器，因為即使您將來更改 html 頁面結構，功能也不會受到影響。

查看下面的 html 實際上應該如何的參考（只是為了確保您知道它，但您正在尋找的解決方案在前兩行中）例如：

<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

在大多數情況下，您可以考慮 HTML 結構良好。 試試下面的代碼片段。

編輯：由於第一條評論而進行了更改。

編輯：如果你有不止一行，你應該使用

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

並為每個找到的元素獲取對，如下所示。

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

如果您無法編輯 HTML，您可以使用 XPATH 作為示例。

Answer 5

document.querySelector('.form-group > div').textContent 但不修改 html 則無法區分名字和姓氏。