├── CSS └── style.css ├── Readme.md ├── .gitattributes ├── index.html ├── .gitignore └── JS └── search.js /CSS/style.css: -------------------------------------------------------------------------------- 1 | .found { 2 | background-color: yellow; 3 | } -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | #Ctrl-f.js 2 | With this libary you can search inside a html content like Ctrl+f but with Ctrl-f.js you can specify a container! 3 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Title of the document 7 | 8 | 9 | 10 |
11 | This is a long html text with some links and ... 12 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 13 | 14 | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, 15 |
16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## Eclipse 3 | ################# 4 | 5 | *.pydevproject 6 | .project 7 | .metadata 8 | bin/ 9 | tmp/ 10 | *.tmp 11 | *.bak 12 | *.swp 13 | *~.nib 14 | local.properties 15 | .classpath 16 | .settings/ 17 | .loadpath 18 | 19 | # External tool builders 20 | .externalToolBuilders/ 21 | 22 | # Locally stored "Eclipse launch configurations" 23 | *.launch 24 | 25 | # CDT-specific 26 | .cproject 27 | 28 | # PDT-specific 29 | .buildpath 30 | 31 | 32 | ################# 33 | ## Visual Studio 34 | ################# 35 | 36 | ## Ignore Visual Studio temporary files, build results, and 37 | ## files generated by popular Visual Studio add-ons. 38 | 39 | # User-specific files 40 | *.suo 41 | *.user 42 | *.sln.docstates 43 | 44 | # Build results 45 | 46 | [Dd]ebug/ 47 | [Rr]elease/ 48 | x64/ 49 | build/ 50 | [Bb]in/ 51 | [Oo]bj/ 52 | 53 | # MSTest test Results 54 | [Tt]est[Rr]esult*/ 55 | [Bb]uild[Ll]og.* 56 | 57 | *_i.c 58 | *_p.c 59 | *.ilk 60 | *.meta 61 | *.obj 62 | *.pch 63 | *.pdb 64 | *.pgc 65 | *.pgd 66 | *.rsp 67 | *.sbr 68 | *.tlb 69 | *.tli 70 | *.tlh 71 | *.tmp 72 | *.tmp_proj 73 | *.log 74 | *.vspscc 75 | *.vssscc 76 | .builds 77 | *.pidb 78 | *.log 79 | *.scc 80 | 81 | # Visual C++ cache files 82 | ipch/ 83 | *.aps 84 | *.ncb 85 | *.opensdf 86 | *.sdf 87 | *.cachefile 88 | 89 | # Visual Studio profiler 90 | *.psess 91 | *.vsp 92 | *.vspx 93 | 94 | # Guidance Automation Toolkit 95 | *.gpState 96 | 97 | # ReSharper is a .NET coding add-in 98 | _ReSharper*/ 99 | *.[Rr]e[Ss]harper 100 | 101 | # TeamCity is a build add-in 102 | _TeamCity* 103 | 104 | # DotCover is a Code Coverage Tool 105 | *.dotCover 106 | 107 | # NCrunch 108 | *.ncrunch* 109 | .*crunch*.local.xml 110 | 111 | # Installshield output folder 112 | [Ee]xpress/ 113 | 114 | # DocProject is a documentation generator add-in 115 | DocProject/buildhelp/ 116 | DocProject/Help/*.HxT 117 | DocProject/Help/*.HxC 118 | DocProject/Help/*.hhc 119 | DocProject/Help/*.hhk 120 | DocProject/Help/*.hhp 121 | DocProject/Help/Html2 122 | DocProject/Help/html 123 | 124 | # Click-Once directory 125 | publish/ 126 | 127 | # Publish Web Output 128 | *.Publish.xml 129 | *.pubxml 130 | 131 | # NuGet Packages Directory 132 | ## TODO: If you have NuGet Package Restore enabled, uncomment the next line 133 | #packages/ 134 | 135 | # Windows Azure Build Output 136 | csx 137 | *.build.csdef 138 | 139 | # Windows Store app package directory 140 | AppPackages/ 141 | 142 | # Others 143 | sql/ 144 | *.Cache 145 | ClientBin/ 146 | [Ss]tyle[Cc]op.* 147 | ~$* 148 | *~ 149 | *.dbmdl 150 | *.[Pp]ublish.xml 151 | *.pfx 152 | *.publishsettings 153 | 154 | # RIA/Silverlight projects 155 | Generated_Code/ 156 | 157 | # Backup & report files from converting an old project file to a newer 158 | # Visual Studio version. Backup files are not needed, because we have git ;-) 159 | _UpgradeReport_Files/ 160 | Backup*/ 161 | UpgradeLog*.XML 162 | UpgradeLog*.htm 163 | 164 | # SQL Server files 165 | App_Data/*.mdf 166 | App_Data/*.ldf 167 | 168 | ############# 169 | ## Windows detritus 170 | ############# 171 | 172 | # Windows image file caches 173 | Thumbs.db 174 | ehthumbs.db 175 | 176 | # Folder config file 177 | Desktop.ini 178 | 179 | # Recycle Bin used on file shares 180 | $RECYCLE.BIN/ 181 | 182 | # Mac crap 183 | .DS_Store 184 | 185 | 186 | ############# 187 | ## Python 188 | ############# 189 | 190 | *.py[co] 191 | 192 | # Packages 193 | *.egg 194 | *.egg-info 195 | dist/ 196 | build/ 197 | eggs/ 198 | parts/ 199 | var/ 200 | sdist/ 201 | develop-eggs/ 202 | .installed.cfg 203 | 204 | # Installer logs 205 | pip-log.txt 206 | 207 | # Unit test / coverage reports 208 | .coverage 209 | .tox 210 | 211 | #Translations 212 | *.mo 213 | 214 | #Mr Developer 215 | .mr.developer.cfg 216 | -------------------------------------------------------------------------------- /JS/search.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | var content_id = "content"; 3 | var content = ''; 4 | 5 | $("#search_val").keydown(function(event){ 6 | // on Enter 7 | if(event.keyCode == 13){ 8 | // reset content 9 | if(content != '') { 10 | $("#"+content_id).html(content); 11 | } else { 12 | content = $("#"+content_id).html(); 13 | } 14 | intern_search($("#search_val").val()); 15 | } 16 | }) 17 | 18 | function intern_search(value) { 19 | // get the html text 20 | var html_content = $("#"+content_id).html(); 21 | // split value into words 22 | var value_words = value.split(' '); 23 | var nr_words = value_words.length; 24 | 25 | // check if value is inside a html tag or not 26 | // if the first angle bracket is a '<' the value is outside of a html tag 27 | if (nr_words === 1) { 28 | var regex = new RegExp(value+'(?=[^>]*?(<|$))','gi'); 29 | } else { 30 | // there can be a html tag between two words 31 | var regex = value_words[0]+'(?=[^>]*?(<|$))'; 32 | for (var i = 1; i < nr_words; i++) { 33 | // there can be a space and a whole html tag between two parts 34 | regex += '(?: ?)(?:<[^>]*?>)?(?: ?)'+value_words[i]+'(?=[^>]*?(<|$))'; 35 | } 36 | var regex = new RegExp(regex,'gi'); 37 | } 38 | 39 | var matches = null; 40 | var positions = [], found = [], add_found_char = []; 41 | 42 | while(matches = regex.exec(html_content)) { 43 | // add this before / after a value part 44 | var start_tag = ''; 45 | var end_tag = ''; 46 | // if the match contains html tags there need to be a 47 | // before the html tag starts and a def => abc

def 49 | var match = matches[0].replace(/>/g,'>'+start_tag); 50 | match = match.replace(/<(?!span class="found">)/g,end_tag+'<'); 51 | 52 | // save the new match with correct html tags 53 | found.push(match); 54 | // save how many chars have been added 55 | add_found_char.push(match.length-matches[0].length); 56 | // save found position 57 | positions.push(matches.index); 58 | } 59 | 60 | 61 | var add_nr_chars = 0; 62 | var new_html_content = html_content; 63 | // iterate through all positions and add a span tag to mark the query 64 | for (var i = 0; i < positions.length; i++) { 65 | // add this before / after the found value 66 | var start_tag = ''; 67 | var end_tag = ''; 68 | // string before value 69 | var content_before = new_html_content.substr(0,positions[i]+add_nr_chars); 70 | // value and start_tag and end_tag 71 | var value_and_tags = start_tag + found[i] + end_tag; 72 | // string after value 73 | var content_after = new_html_content.substr(positions[i]+add_nr_chars+found[i].length-add_found_char[i]); 74 | 75 | // number of characters which have been added 76 | add_nr_chars += start_tag.length + end_tag.length + add_found_char[i]; 77 | 78 | // new content 79 | new_html_content = content_before + value_and_tags + content_after; 80 | } 81 | 82 | $("#"+content_id).html(new_html_content); 83 | } 84 | 85 | 86 | }) --------------------------------------------------------------------------------