Strategi yang berkesan untuk mengira kata -kata dengan tepat dalam kandungan HTML

Apabila berurusan dengan rentetan yang mengandungi tag HTML, pelucutan HTML secara langsung boleh menyebabkan kata -kata menjadi salah faham, yang mempengaruhi ketepatan kiraan perkataan. Artikel ini akan memperkenalkan kaedah yang mantap untuk mencapai pengiraan perkataan yang tepat dengan menggantikan tag HTML dengan ruang, menormalkan aksara ruang putih, dan kemudian memotong rentetan. Pendekatan ini memastikan bahawa kata -kata dipisahkan dengan betul dan dikira walaupun HTML asal berstruktur dengan ketat.

Cabaran dengan pengiraan perkataan dalam kandungan html

Dalam pembangunan web, sering diperlukan untuk mengira bilangan perkataan dalam input pengguna atau kandungan halaman. Apabila kandungan mengandungi tag HTML, kesilapan biasa adalah menggunakan kaedah pelucutan teks secara langsung seperti harta TextContent JavaScript atau yang serupa. Walaupun kaedah ini dapat menghapuskan tag HTML, ia boleh menyebabkan kandungan teks bersebelahan disambungkan dengan salah, dengan itu salah mengenal pasti beberapa perkataan sebagai satu perkataan.

Sebagai contoh, pertimbangkan serpihan HTML berikut:

 <p> one </p> <p> dua </p> <p> tiga </p>

Jika TextContent digunakan secara langsung, hasilnya akan menjadi OneTwothree. Pada ketika ini, algoritma pengiraan perkataan mudah (contohnya, dengan memadankan urutan aksara bukan Whitespace) akan mengenalinya sebagai satu perkataan dan bukannya tiga perkataan yang diharapkan. Ini jelas tidak sesuai dengan pemahaman intuitif kami tentang pengiraan perkataan.

Penyelesaian pengiraan perkataan yang mantap

Untuk mengatasi masalah di atas, kita memerlukan kaedah pra -proses yang lebih canggih. Idea teras adalah untuk menggantikan tag HTML dengan aksara ruang putih yang sesuai apabila melucutkan mereka untuk memastikan kata -kata yang asalnya dipisahkan oleh tag boleh kekal bebas. Berikut adalah strategi langkah demi langkah:

1. Gantikan tag HTML dengan ruang

Pertama, kita perlu mengenal pasti dan mengeluarkan semua tag HTML. Kuncinya ialah apabila anda mengeluarkan tag, masukkan satu atau lebih ruang di tempatnya dan bukannya memadamkannya. Ini memastikan bahawa terdapat sekurang -kurangnya satu ruang antara perkataan yang dipisahkan oleh tag.

Langkah ini dapat dicapai dengan cekap menggunakan ungkapan biasa. Sebagai contoh, dalam JavaScript, anda boleh menggunakan /(])>) /ig untuk memadankan semua tag HTML (termasuk tag pembukaan dan penutup) dan menggantikannya dengan satu ruang.

Contoh:

one

Dua

2. Normalkan watak Whitespace Race

Selepas langkah pertama, mungkin terdapat banyak ruang berturut -turut dalam rentetan, seperti `atau`. Untuk membuat perkataan berikutnya lebih tepat dan ringkas, kita perlu menormalkan semua aksara ruang kosong berturut -turut (termasuk ruang, tab, garis baru, dan lain -lain) ke dalam satu ruang.

Gunakan ungkapan biasa /\ s /gm untuk memadankan satu atau lebih aksara ruang putih dan gantikannya dengan satu ruang.

Contoh: Satu dua selepas langkah ini, ia akan menjadi satu dua.

3. Keluarkan ruang tambahan yang terkemuka dan terkawal

Selepas dua langkah pertama pemprosesan, masih terdapat ruang tambahan pada awal dan akhir rentetan. Sebagai contoh, jika HTML asal bermula atau berakhir dengan tag, rentetan yang diproses mungkin mempunyai ruang tambahan pada awal atau akhir. Ruang ini tidak boleh dikira sebagai pemisahan perkataan.

Gunakan ekspresi biasa ^\ s | \ s $ (atau kaedah trim () yang lebih ringkas) untuk menghapuskan aksara ruang putih pada permulaan dan akhir rentetan.

Contoh: Satu dua selepas langkah ini, ia akan menjadi satu dua.

4. Melakukan pengiraan perkataan

Selepas pra -proses di atas, kami mendapat rentetan yang bersih di mana kata -kata dipisahkan oleh satu ruang dan tidak ada ruang tambahan dan trailing tambahan. Sekarang, ada beberapa cara untuk mengira perkataan:

• Dengan memisahkan rentetan dan menapis unsur -unsur kosong: Memisahkan rentetan dengan ruang ke dalam array, kemudian menapis rentetan kosong dalam array (hanya dalam kes), dan akhirnya mengira panjang array.
• Dengan memadankan urutan aksara bukan Whitespace: Gunakan ekspresi biasa /\ s /g untuk memadankan semua urutan watak bukan Whitespace (iaitu kata-kata), dan kemudian mengira bilangan perlawanan. Ini adalah kaedah yang paling langsung dan disyorkan.

Contoh kod komprehensif

Berikut adalah fungsi JavaScript lengkap yang melaksanakan logik di atas:

 /**
 * Mengira bilangan perkataan dalam rentetan HTML.
 * Fungsi ini pertama melucutkan tag html, menggantikannya dengan ruang, kemudian menormalkan aksara ruang putih,
 * Kata -kata dalam rentetan selepas pemprosesan statistik akhir.
 *
 * @param {string} htmlstring rentetan yang mengandungi kandungan html.
 * @returns {Number} Bilangan perkataan dalam rentetan.
 */
fungsi CountwordSinhtml (htmlstring) {
    jika (! htmlstring || typeof htmlstring! == 'string') {
        kembali 0;
    }

    // 1. Gantikan semua tag html dengan ruang tunggal ///(])>)/ig sepadan dengan semua tag html biarkan t Tobtext = htmlstring.replace (/(([^>])/ig, "");

    // 2. Normalkan semua aksara ruang putih berturut -turut ke dalam satu ruang // /\ s /gm sepadan dengan satu atau lebih aksara ruang putih (ruang, tab, baru, dll.)
    TALTEXT = TALTEXT.Replace ( /\ s /gm, "");

    // 3. Keluarkan ruang pada permulaan dan akhir rentetan // tatalext = t Tobtext.replace (/^\ s | \ s $/gm, ""); // Anda juga boleh menggunakan kaedah trim () THORTEXT = TALTEXT.TRIM ();

    // 4. Kira bilangan perkataan // /\ s /g sepadan dengan satu atau lebih aksara bukan Whitespace (iaitu kata-kata)
    const words = t Tobext.match ( /\ s /g);

    // Jika tiada perkataan dipadankan, kembali 0, jika tidak, pulangkan bilangan perkataan yang dipadankan dengan kata -kata? Words.length: 0;
}

// Contoh Penggunaan:
const htmlcontent1 = `<div class=" box " id=" test ">
<p> one </p> <p> dua </p> <p> tiga </p>
</div> `;
const htmlcontent2 = `<span> hello </span> <b> dunia! </b> <br> Ini adalah ujian.
const htmlcontent3 = `no html di sini. Hanya teks biasa.`;
const htmlcontent4 = `<p> </p>`; // hanya Whitespace dan tags console.log (`" $ {htmlcontent1} "kiraan perkataan: $ {countwordsinhtml (htmlcontent1)}`); // output yang diharapkan: 3
console.log (`" $ {htmlContent2} "s kiraan perkataan: $ {countwordsinhtml (htmlcontent2)}`); // Output yang diharapkan: 6
console.log (`" $ {htmlContent3} "s Count Word: $ {countwordsinhtml (htmlcontent3)}`); // Output yang diharapkan: 6
console.log (`" $ {htmlContent4} "s kiraan perkataan: $ {countwordsinhtml (htmlcontent4)}`); // output yang diharapkan: 0

// coretan html dan js dari soalan asal // menganggap ini adalah textContent yang diperoleh dari DOM, tetapi di sini kita berurusan dengan rentetan html secara langsung const originalHtml = `<div class=" box " id=" test ">
<p> one </p> <p> dua </p> <p> tiga </p>
</div> `;
Console.log (`Bilangan perkataan dalam soalan asal html: $ {countwordsinhtml (originalHtml)}`); // output yang diharapkan: 3

Perkara yang perlu diperhatikan

• Definisi "Word": Kaedah di atas merawat sebarang urutan aksara bukan Whitespace sebagai perkataan. Ini bermakna kata-kata seperti "hello-world", "123" atau "Word!" semuanya dikira sebagai satu perkataan. Jika anda memerlukan definisi perkataan yang lebih ketat (contohnya, hanya huruf), anda perlu menyesuaikan ungkapan biasa yang sepadan dengan perkataan.
• Prestasi: Untuk rentetan HTML yang sangat besar, mungkin terdapat sedikit overhead prestasi dengan penggantian ekspresi tetap berturut -turut. Tetapi dalam kebanyakan senario aplikasi web, overhead ini boleh diterima.
• Watak -watak Khas: Jika kandungan HTML mengandungi entiti khas (seperti & amp;), entiti -entiti ini mungkin perlu dikodkan sebelum dikira untuk memastikan bahawa mereka tidak dikira secara salah sebagai kata atau bahagian kata. Walau bagaimanapun, penyemak imbas biasanya mengendalikan entiti ini apabila memberi, dan di sini kita berurusan dengan rentetan HTML mentah.

Meringkaskan

Kunci untuk mengira bilangan perkataan dengan tepat dalam rentetan yang mengandungi kandungan HTML terletak pada pra -proses yang betul dari tag HTML. Dengan menggantikan tag HTML dengan ruang, menormalkan aksara ruang putih, dan memangkas rentetan, kita dapat dengan berkesan mengelakkan kesilapan penyambungan perkataan dan mendapatkan hasil kiraan perkataan yang boleh dipercayai. Kaedah ini lebih mantap daripada sekadar melucutkan textContent dan berfungsi dengan pelbagai struktur HTML yang kompleks.

Atas ialah kandungan terperinci Strategi yang berkesan untuk mengira kata -kata dengan tepat dalam kandungan HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!