Ekstraksi HTML dan Teks dengan Regex

Tabel Konten
  1. Ekstraksi Umum 
  2. Ekstraksi Spesifik 
  3. Versi PHP 

Ekstraksi Umum 

Memisahkan antara tag HTML dengan teks di sekitarnya:

var test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut?';
var results = test.match(/(<\/?[-:\w]+(?:\s[^<>]*?)?>)|([^<>]+)/g);

console.log(results);

Hasil:

[
    'foo ',
    '<a b="c">',
    'bar',
    '</a>',
    ' baz ',
    '<b>',
    ' qux yo"s ',
    '<c>',
    '<d>',
    ' wut?'
]

Dengan cara ini Anda dapat melakukan manipulasi teks dengan aman tanpa harus mempengaruhi tag HTML. Caranya adalah dengan mengecek terlebih dahulu apakah anggota merupakan tag HTML atau teks:

var output = "";
for (var i = 0, len = results.length; i < len; ++i) {
    var s = results[i];
    // Is this a HTML tag or text?
    if (s && s[0] === '<' && s.slice(-1) === '>') {
        // this is a HTML tag …
        output += s;
    } else {
        // do something with text …
        output += s.replace(/"/g, '&quot;');
    }
}

console.log(output);

Hasil:

'foo <a b="c">bar</a> baz <b> qux yo&quot;s <c><d> wut?'

Ekstraksi Spesifik 

Kode di bawah ini akan memisahkan antara tag HTML dengan nama tertentu saja, sehingga teks bisa saja berisi tag HTML yang diperbolehkan. Ini berguna jika Anda ingin melakukan manipulasi teks di luar tag tertentu saja, misalnya tag <kbd>, <pre>, <script> dan <style>:

var test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut? <kbd>ignore this yo"s</kbd>';
var results = [];

test.replace(/(.*?)(<\/?(?:kbd|pre|script|style)(?:\s[^<>]*?)?>|$)/g, function(a, b, c) {
    b && results.push(b);
    c && results.push(c);
});

console.log(results);

Hasil:

[
    'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut? ',
    '<kbd>',
    'ignore this yo"s',
    '</kbd>'
]

Berikut ini adalah cara mengubah karakter " yang berada di luar tag <kbd> menjadi &quot;:

var output = "";
var skip = false;
for (var i = 0, len = results.length; i < len; ++i) {
    var s = results[i];
    if (s && s[0] === '<' && s.slice(-1) === '>') {
        // check whether the HTML tag is an opening or closing tag …
        skip = s[1] && s[1] !== '/';
        output += s;
    } else {
        output += !skip ? s.replace(/"/g, '&quot;') : s; // replace or skip …
    }
}

console.log(output);

Hasil:

'foo <a b=&quot;c&quot;>bar</a> baz <b> qux yo&quot;s <c><d> wut? <kbd>ignore this yo"s</kbd>'

Versi PHP 

PHP sudah memiliki fungsi khusus untuk menangani tugas ini:

$test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut?';
$results = preg_split('#(<\/?[-:\w]+(?:\s[^<>]*?)?>)#', $test, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);

var_dump($results);

Untuk melakukan ekstraksi tag HTML secara spesifik:

$results = preg_split('#(<\/?(?:kbd|pre|script|style)(?:\s[^<>]*?)?>)#', $test, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);

6 Komentar

  • Mas Tamvan

    Kang gimana ya cara agar text tertentu dalam div otomatis ditambahkan abbr?

    Contoh
    <div class='post-body'>
    Saya ingin otomatis membungkus tetx Blogger dengan abbr.
    </div>

    Hasilnya jadi

    <div class='post-body'>
    Saya ingin otomatis membungkus tetx <abbr>Blogger</abbr> dengan abbr.
    </div>

  • Unknown

    #oot
    admin, can you reupload link kerangka template responsive 2 column dan 3 column??
    i need it. thanks before.

  • Jhonarendra

    Terimakasih min

  • Taufik Nurrohman

    var a = document.querySelector('.post-body');
    a.innerHTML = a.innerHTML.replace(/\bBlogger\b/g, '<abbr>$&</abbr>');
  • RizkyKR

    Mantab mas, saya mau tanya mas
    jadi didalam $page['content'] kan terdiri atas banyak html, tapi kali ini mau dapatkan khusus teks didalam tag <p> gimana ya mas taufik? kurang lebih sama seperti readmore text ^_^

  • Taufik Nurrohman

    Kalau itu lebih gampang:

    if (preg_match('/<p(?:\s[^>]*)?>([\s\S]*?)<\/p>/', $page['content'], $m)) {
    $excerpt = $m[1];
    } else {
    $excerpt = null;
    }

Komentar telah ditutup.