| Autor | Zpráva | ||
|---|---|---|---|
| PavV Profil |
Ahojky
mám tento kod var regex = new RegExp( '('+ $('#search-box').val() +')', 'ig');
$('#text-frame').contents().find('.phr').each(function() {
$(this).html( $(this).html().replace( regex, '<mark data-id=0>$1</mark>'));
})v tagu je vložen další tag. Jak docílit aby označil jen text a znaků mezi <...> si nevšímal ? Např. hledám s Seda si <span class='sa'>sám</span> Výsledek: <mark data-id=0>S</mark>eda <mark data-id=1>s</mark>i <span class='sa'><mark data-id=2>s</mark>ám</span> Dík předem za radu PS: pokud se data-id nebudou číslovat nevadí |
||
| Serg Profil |
Zkus tohle:
var src_str = $("#test").text();
var term = "my text";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "gi");
src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");
$("#test").html(src_str);zdroj: https://stackoverflow.com/a/19721054 Ten regulár mi příjde celkem složitější než by musel být (asi řeší spoustu dalších situací nebo co..), ale vypadá to, že funguje :D |
||
| PavV Profil |
Serg:
díky, ale není to to pravé. Už první příkaz je vadný. Musí se do proměnné načíst celé html, nikoliv jen text. Tedy $('#test').html(). Zkusil jsem obě možnosti a výsledek je stejný co původní Výsledek Vašeho kodu při $('#test').html(): Z původního texu Růžový slon v domě a jiné logičnosti<span class="subtitle"><br> aneb <br>Úvod do tajů výrokové logiky se zvláštním přihlédnutím k logickým hádankám a rébusům</span> to udělalo Růžový <mark>s</mark>lon v domě a jiné logično<mark>s</mark>ti<<mark>s</mark>pan cla<mark>s</mark><mark><mark>s</mark>="<mark>s</mark>ubtitle"><br>&nb<mark>s</mark>p;aneb&nb<mark>s</mark>p;<br>Úvod do
tajů výrokové logiky <mark>s</mark>e zvláštním přihlédnutím k logickým hádankám a rébu<mark>s</mark>ům<!--<mark-->s</mark>pan> |
||
| Serg Profil |
Aha, toho .text() jsem si nevšiml. Koukal jsem na živou ukázku (jsfiddle.net/UPs3V/291) a tam měl .html(), a v ukázce byl právě odkaz, který to po označení přežil a zůstal si dál být funkčním odkazem.
Co myslíš tím, že výsledek je stejný co původní? Jako že to po transformaci rozbije html prvky? V komentech u toho psali, že to zruší navázané eventy (přes addEventListener), ale o eventy se příjdeme tak jako tak, když se změní innerHTML Tohle vypadá taky zajímavě: jsfiddle.net/crustyashish/rGrvf/1 Akorát tam nepracuje se stringem a .replace() ale s DOM-em PavV: „ <mark>S</mark>eda <mark>s</mark>i <<mark>s</mark>pan clas<mark>s</mark>='<mark>s</mark>a'><mark>s</mark>ám</span>“
Edit: A jo, už to taky vidím. Takže Ctrl+C a Ctrl+V random kódu z netu tady očividně stačit nebude :D Možná zkusit tu verzi co pracuje přímo s DOM-em, nebo až budu doma tak zkusím popřemýšlet jak upravit regulár aby kontroloval jestli není uvnitř html značky Co zkusit negative lookbehind? Akorát nevím jestli to JS podporuje. var regex = new RegExp( '((?<!<[^>]*)'+ $('#search-box').val() +')', 'ig'); |
||
| Firibix Profil |
#5 · Zasláno: 2. 4. 2022, 11:10:59
Nepokoušejte se parsovat HTML pomocí regulárních výrazů, nikdy to nebude fungovat na 100 %. Druhá odkázaná ukázka v [#4] s využitím DOM API a rekurzivním zanořováním až úroveň textových nodů je správná cesta.
|
||
| PavV Profil |
#6 · Zasláno: 2. 4. 2022, 13:50:27
PavV, Firibix:
SUPER díky moc |
||
|
Časová prodleva: 2 roky
|
|||
0