2014. július 26., szombat

Sortörések eltávolítása a szöveg körül (HTML, JS)

Dolgozom egy kis "meglepi" UserScript-en (amit majd hamarosan publikálni fogok;)), és a következő problémába ütköztem.

Adott a HTML kódban egy bekezdés, és a szöveg előtt-mögött sortörések.
A feladat pedig az, hogy a szöveg körül helyet foglaló <br> tag-eket eltávolítsam.


Itt meg is jegyzem, hogy nem vagyok JS guru, és jQuery-vel könnyítem meg az életem.

Első próbálkozásom az volt, hogy kiválasztom a "br:first-child, br:last-child" elemeket, és törlöm, majd ezt megismétlem, mindaddig, amíg van találat ilyen elemre. A probléma ezzel az, hogy a szöveget a jQuery nem kezeli child-nak... az eredmény az lett, hogy az összes <br> tag-től búcsút mondhattam.

Aztán rájöttem, hogy le lehet kérni egy elem HTML kódját szövegként... és azon tudok manipulálni, méghozzá kedves barátaimmal, a regexpekkel! :) Így meg is született a megoldás:
var elem = $('p');
var h = elem.html().trim();
    
// törlés szöveg elől
while (h.match(/^<br ?\/?>/gi)) h = h.replace(/^<br ?\/?>/gi, '').trim();
    
// törlés szöveg mögül
while (h.match(/<br ?\/?>$/gi)) h = h.replace(/<br ?\/?>$/gi, '').trim();
    
elem.html(h);    
});
Felraktam egy működő példát JSFiddle-re, annyi módosítással, hogy minden <p> tag-et megbuherál: http://jsfiddle.net/ULwCL/

Nincsenek megjegyzések: