Javascript - search for HTML elements in string - javascript

I have string with html elements. There are tables with captions. I need to find table which has caption with certain text and then return this table - as a string.
What is the best way to do this with simple javascript, without any libraries ?
F.e. this is an initial string
<table border="1"><caption><strong>First</strong></caption><tbody><tr><td>...</td></tr></tbody></table><table border="1"><caption><strong>Result</strong></caption><tbody><tr><td>...</td></tr></tbody></table><table border="1"><caption><strong>Last</strong></caption><tbody><tr><td>...</td></tr></tbody></table>
I want to get this string :
<table border="1"><caption><strong>Result</strong></caption><tbody><tr><td></td></tr></tbody></table>
Any advice or algorithm how to effeciently resolve this problem ? The challenge is to resolve it with javascript without using any third-party libraries and also without converting text into xml or something similar (because some of html code is not well formatted and it causes errors).

I have not had time to completely test this, but you might be able to try using a regular expression and the match() function. Assuming your table string is in a variable called str, then something along the lines of
var res = str.match(\b<table\.\w+_</table>\b);
res will be an array of matches of strings that begin with '', which you could then check to see which string contains the caption that you need.
Hope that helps!

Related

JQuery String Concatenation within a String

I'd like to preface this by saying I'm new to JQuery and this may be a simple question, but I was unable to find a solution after searching to the best of my ability.
I am trying to build a path to an image, where I am working with an API which returns an object that gives part of the path but not the base path.
Ex:
Base path = Youtube.com/watch/?
Path piece from API: /gdsrhab
On line 29 you can see I am trying to perform string concatenation within trying to build the "results" string. I understand why this is not working the way I've set it up, but am not sure how to syntactically perform this (if possible).
I've also tried to create two variables: baseURL and apiURL, concatenate them and save the result into completeURL then substitute it in, but it JQuery takes the string literal "completeURL" instead of substituting the value of the variable. Could someone point me in the right direction for how to get the full path within the tag? Thanks in advance for your help.
Picture of my JQuery code
In the following picture you can see the second half of the path is missing
The error message I receive
You are using ES6 string templates at start, so you only need to set your variable inside the ${}, you dont need to concate it, the string template will do it for you. So instead of
<img src = 'http...../' + '${movie.poster_path}'}>
that will output something like:
<img src="'http://yoururl.com/'+'mypath'"
you only need to do
<img src = 'http://yoururl.com/${movie.poster_path}'>
inside your string template

Prevent Table Cell to Convert HTML Entities

<table>
<tr>
<td>></td>
</tr>
<tr>
<td>&GT</td>
</tr>
</table>
I have the above code for table cells having html entities. Also, I have a related question (which is now answered) having the same details but with different scenario.
The goal is to output the string as is, without converting it to HTML Entities. For example the string "Project &GT" will be outputted as is.
Below are 2 solutions I've tried but still does not meet my requirements (these are answers from question)
A. First Row - this answer does not correctly display the string. It displays the converted html which is ">". But this solution works on non-table elements like tooltips and spans. Also, if the string has different casing (Project&gT) it outputs the casing from the original string.
B. Second Row - this answer do display the string correctly. It does not output the converted string. But my problem here is if the string has different casing (Project&gT) it will output the case you have encoded on the logic (Project&GT - since this is the one we encoded on the HTML).
Is there a way to have an unconverted string and preserve its casing?
UPDATE: Forgot to mention that I am using this with angular.datatable's renderWidth.
.renderWith(function(data) {
return $filter('customFilter')(data)});
I've used it together with a customFilter to stop the conversion. In my debugging, the filter returns the correct result but it always has a problem when it renders to table cells . This is why I directly asked the question about prior to this update
If you use angular, use ng-bind it's alwais give you the plain text.
Hire is the link
To get &gt ; use ng-bind
to get > use ng-bind-html
Try it.
You could do something like this:
function findNoParse(){
$('noparse').each(function(){
if($(this).attr('tagchecked') != 'true'){ //checks if already changed tag
$(this).text($(this).html()); //makes the html into plaintext
$(this).attr('tagchecked', 'true'); //says that tag has been checked
}
});
}
In HTML
<noparse>Link</noparse>
I have created a fiddle. Please take a look. Fiddle

Javascript regex to replace ampersand in all links href on a page

I've been going through and trying to find an answer to this question that fits my need but either I'm too noob to make other use cases work, or their not specific enough for my case.
Basically I want to use javascript/jQuery to replace any and all ampersands (&) on a web page that may occur in a links href with just the word "and". I've tried a couple different versions of this with no luck
var link = $("a").attr('href');
link.replace(/&/g, "and");
Thank you
Your current code replaces the text of the element within the jQuery object, but does not update the element(s) in the DOM.
You can instead achieve what you need by providing a function to attr() which will be executed against all elements in the matched set. Try this:
$("a").attr('href', function(i, value) {
return value.replace(/&/g, "and");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
link
link
Sometimes when replacing &, I've found that even though I replaced &, I still have amp;. There is a fix to this:
var newUrl = "#Model.UrlToRedirect".replace(/&/gi, '%').replace(/%amp;/gi, '&');
With this solution you replace & twice and it will work. In my particular problem in an MVC app, window.location.href = #Model.UrlToRedirect, the url was already partially encoded and had a query string. I tried encoding/decoding, using Uri as the C# class, escape(), everything before coming up with this solution. The problem with using my above logic is other things could blow up the query string later. One solution is to put a hidden field or input on the form like this:
<input type="hidden" value="#Model.UrlToRedirect" id="url-redirect" />
then in your javascript:
window.location.href = document.getElementById("url-redirect").value;
in this way, javascript won't take the c# string and change it.

JSOUP: Parsing Javascript fields from an HTML document?

I'm fairly new to JSOUP, and i've had no issues parsing using Element.select on tags or id values. The issue i'm having is how to screen scrape javascript code in the page. Here i load the document:
Document doc = Jsoup.connect(pageUrl)
.userAgent(Agent)
.timeout(5000)
.get();
The javascript field values i'm trying to extract are the following:
arrayGPSLocation["0"] = "-19473982376,6848295867";
arrayGPSLocation["1"] = "-19473982376,6848296245";
Since these array values are not in a standard code tag <> is JSOUP the appropriate way to do this? I like JSOUP's API. The only other method is hacking together a String routine...
ie:
int start = pageBuffer.indexOf("arrayGPSLocation[\" + counter + \"]");
int end = pageBuffer.indexOf(";");
String result = pageBuffer.subString(start,end);
This pseudo-code example would have a serious performance problem when parsing a large page. Does anyone know how to accomplish this with JSOUP or should i write my own scraper?
All you can do with Jsoup - is select Element that contains javascript code, get its value as String and work with this string. Right like you doing it in example.

Create 2d array from string

I have the following string :
[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],]
How can I create a 2d array of strings from it ?
EDIT
I've removed html tags since they're not the problem here. Also I'd like to do it without using any additional libs to keep it lightweight.
Except from the HTML tags in it, it would be valid JSON. You could remove the HTML tags and parse it using any library that handles JSON, like jQuery:
var arr = $.parseJSON(theString.replace(/<br\/>/g,''));
It would also be valid Javascript code with the HTML tags removed, so if you have full control over where the string comes from so that you are certain that it can never contain any harmful code, you could use the eval function to execute the string:
// Warning: 'eval' is subject to code injection vulnerabilities
var arr = eval(theString.replace(/<br\/>/g,''));
You will need to remove the <br/> from the string. Then you should be able to do:
var my2darray = eval(mystring);

Categories