Rendering VueJS prop within HTML array - html

I have an HTML array with data like so:
data-groups='["category_all", "data goes here"]'
I have a prop called "title" which contains the string I need to render in the "data goes here" area. I've tried using v-bind, but then I lose the array which I need to have in order for the original sort feature to work.
I google'd a few different ways to either escape or render quotes, and most refer to v-bind which again, won't work in this instance.
Any help would be appreciated :)

I was using Shuffle.js and for anyone else seeking an answer, it was in the documentation:
https://vestride.github.io/Shuffle/docs/getting-started
Alternatively, you can set the delimiter option to a comma (delimiter: ',') and the data-groups attribute will be split on that character.
Then changing the above line of code to:
:data-groups="item.category.title + ',all'"
works just fine :)

Related

How do you replace part of a string of an apache NIFI attribute?

Can you update attribute using replace text of an attribute's value?
I have an attribute - ${a} which has a place holder called "PLACEHOLDER". How do I replace each occurrence of the word "PLACEHOLDER" in attribute ${a} with the value of attribute ${b}?
I have tried using replace text processor - using both Regex Replace and Literal Replace replacement strategies without any luck.
See below my example.
1. Generate flow file.
Replace text attempt 1 - literal replace strategy
Replace text attempt 2 - regex replace strategy
None works as attribute value is unchanged.
How can I achieve this? If not this processor, which one please? How? Thanks in advance!
Haha...Such a bummer. Found the answer. Should have kept digging through the documentation i guess.
Use update attribute processor then set attribute to ${a:replace('PLACEHOLDER', ${b})}
Hope this helps someone who's not searched documentation properly like me in future :-)

Binding An Array Entry in an Image Source

<img [src]=post.$value.split("|")[2]>
I want to bind the value post.$value.split("|")[2] to an image source. It is simply a string that comes from another string I have split. I want to avoid looping through another array since I have
*ngFor = 'let post of posts | async'
As the ngFor statement that loops over my elements and that is a FirebaseListObservable which I would like to avoid to mess with and keep like it is. For some reason html doesn't recognize the square brackets in the expression. What do I do, Angular won't recognize it using either the input [] syntax or the {{}}syntax.
You should surround your expression with quotes :
<img [src]="post.$value.split('|')[2]">

Getting text of a span that is not displayed

The web page I'm testing has a span with inner HTML having a numeric value that I want to extract. For example:
<span class="timeout" style="display:none">5000</span>
I tried using the nightwatch command getText(), but it only returns "displayable" text, which, in this case, is a null string. What is the proper way to access this data?
Figured it out myself. You can use getAttribute on "innerHTML" to get the value, e.g.,
browser.getAttribute(spanCSS,"innerHTML",function(r)
{ console.log("span's innerHTML is " + r.value)
})
Wonder if there is a list of these "reserved" attribute names somewhere.

How to use Resource File for html parameters?

In my project we are using Resource files and i am calling the resource file by the following syntax:
#HttpContext.GetGlobalResourceObject(CustomersResource, "t_GoBackCustomer")
where CustomersResource is the Resource file name and t_GoBackCustomer is the key name. The value of the key will be like "Go Back to Previous Page". The whole value is rendering for labels and other places without any problem.
But when i use
<a title=#HttpContext.GetGlobalResourceObject(CustomersResource, "t_GoBackCustomer")>
only the first word is coming as title. i.e while pressing F12 I can see as
`<a title="Go" Back to Previous Page></a>'
Only "Go" is coming as title. The words after space is not considered as title. The same is the case for Placeholder. Can anyone say what is the mistake i am doing here?
I have found solution to my problem. I have to use the following syntax to get words with spaces.
<a title='#HttpContext.GetGlobalResourceObject(CustomersResource, "t_GoBackCustomer")'>
The single quotes did the magic. For labels and controls we no need to use single quotes. But while using for html parameters like Title and PlaceHolder we must need to use Quotes.

Regex: Extracting readable (non-code) text and URLs from HTML documents

I am creating an application that will take a URL as input, retrieve the page's html content off the web and extract everything that isn't contained in a tag. In other words, the textual content of the page, as seen by the visitor to that page. That includes 'masking' out everything encapsuled in <script></script>, <style></style> and <!-- -->, since these portions contain text that is not enveloped within a tag (but is best left alone).
I have constructed this regex:
(?:<(?P<tag>script|style)[\s\S]*?</(?P=tag)>)|(?:<!--[\s\S]*?-->)|(?:<[\s\S]*?>)
It correctly selects all the content that i want to ignore, and only leaves the page's text contents. However, that means that what I want to extract won't show up in the match collection (I am using VB.Net in Visual Studio 2010).
Is there a way to "invert" the matching of a whole document like this, so that I'd get matches on all the text strings that are left out by the matching in the above regex?
So far, what I did was to add another alternative at the end, that selects "any sequence that doesn't contain < or >", which then means the leftover text. I named that last bit in a capture group, and when I iterate over the matches, I check for the presence of text in the "text" group. This works, but I was wondering if it was possible to do it all through regex and just end up with matches on the plain text.
This is supposed to work generically, without knowing any specific tags in the html. It's supposed to extract all text. Additionally, I need to preserve the original html so the page retains all its links and scripts - i only need to be able to extract the text so that I can perform searches and replacements within it, without fear of "renaming" any tags, attributes or script variables etc (so I can't just do a "replace with nothing" on all the matches I get, because even though I am then left with what I need, it's a hassle to reinsert that back into the correct places of the fully functional document).
I want to know if this is at all possible using regex (and I know about HTML Agility Pack and XPath, but don't feel like).
Any suggestions?
Update:
Here is the (regex-based) solution I ended up with: http://www.martinwardener.com/regex/, implemented in a demo web application that will show both the active regex strings along with a test engine which lets you run the parsing on any online html page, giving you parse times and extracted results (for link, url and text portions individually - as well as views where all the regex matches are highlighted in place in the complete HTML document).
what I did was to add another alternative at the end, that selects "any sequence that doesn't contain < or >", which then means the leftover text. I named that last bit in a capture group, and when I iterate over the matches, I check for the presence of text in the "text" group.
That's what one would normally do. Or even simpler, replace every match of the markup pattern with and empty string and what you've got left is the stuff you're looking for.
It kind of works, but there seems to be a string here and there that gets picked up that shouldn't be.
Well yeah, that's because your expression—and regex in general—is inadequate to parse even valid HTML, let alone the horrors that are out there on the real web. First tip to look at, if you really want to chase this futile approach: attribute values (as well as text content in general) may contain an unescaped > character.
I would like to once again suggest the benefits of HTML Agility Pack.
ETA: since you seem to want it, here's some examples of markup that looks like it'll trip up your expression.
<a href=link></a> - unquoted
<a href= link></a> - unquoted, space at front matched but then required at back
- very common URL char missing in group
- more URL chars missing in group
<a href=lïnk></a> - IRI
<a href
="link"> - newline (or tab)
<div style="background-image: url(link);"> - unquoted
<div style="background-image: url( 'link' );"> - spaced
<div style="background-image: url('link');"> - html escape
<div style="background-image: ur\l('link');"> - css escape
<div style="background-image: url('link\')link');"> - css escape
<div style="background-image: url(\
'link')"> - CSS folding
<div style="background-image: url
('link')"> - newline (or tab)
and that's just completely valid markup that won't match the right link, not any of the possible invalid markup, markup that shouldn't but does match a link, or any of the many problems with your other technique of splitting markup from text. This is the tip of the iceberg.
Regex is not reliable for retrieving textual contents of HTML documents. Regex cannot handle nested tags. Supposing a document doesn't contain any nested tag, regex still requires every tags are properly closed.
If you are using PHP, for simplicity, I strongly recommend you to use DOM (Document Object Model) to parse/extract HTML documents. DOM library usually exists in every programming language.
If you're looking to extract parts of a string not matched by a regex, you could simply replace the parts that are matched with an empty string for the same effect.
Note that the only reason this might work is because the tags you're interested in removing, <script> and <style> tags, cannot be nested.
However, it's not uncommon for one <script> tag to contain code to programmatically append another <script> tag, in which case your regex will fail. It will also fail in the case where any tag isn't properly closed.
You cannot parse HTML with regular expressions.
Parsing HTML with regular expressions leads to sadness.
I know you're just doing it for fun, but there are so many packages out there than actually do the parsing the right way, AND do it reliably, AND have been tested.
Don't go reinventing the wheel, and doing it a way that is all but guaranteed to frustrate you down the road.
OK, so here's how I'm doing it:
Using my original regex (with the added search pattern for the plain text, which happens to be any text that's left over after the tag searches are done):
(?:(?:<(?P<tag>script|style)[\s\S]*?</(?P=tag)>)|(?:<!--[\s\S]*?-->)|(?:<[\s\S]*?>))|(?P<text>[^<>]*)
Then in VB.Net:
Dim regexText As New Regex("(?:(?:<(?<tag>script|style)[\s\S]*?</\k<tag>>)|(?:<!--[\s\S]*?-->)|(?:<[\s\S]*?>))|(?<text>[^<>]*)", RegexOptions.IgnoreCase)
Dim source As String = File.ReadAllText("html.txt")
Dim evaluator As New MatchEvaluator(AddressOf MatchEvalFunction)
Dim newHtml As String = regexText.Replace(source, evaluator)
The actual replacing of text happens here:
Private Function MatchEvalFunction(ByVal match As Match) As String
Dim plainText As String = match.Groups("text").Value
If plainText IsNot Nothing AndAlso plainText <> "" Then
MatchEvalFunction = match.Value.Replace(plainText, plainText.Replace("Original word", "Replacement word"))
Else
MatchEvalFunction = match.Value
End If
End Function
Voila. newHtml now contains an exact copy of the original, except every occurrence of "Original word" in the page (as it's presented in a browser) is switched with "Replacement word", and all html and script code is preserved untouched. Of course, one could / would put in a more elaborate replacement routine, but this shows the basic principle. This is 12 lines of code, including function declaration and loading of html code etc. I'd be very interested in seeing a parallel solution, done in DOM etc for comparison (yes, I know this approach can be thrown off balance by certain occurrences of some nested tags quirks - in SCRIPT rewriting - but the damage from that will still be very limited, if any (see some of the comments above), and in general this will do the job pretty darn well).
For Your Information,
Instead of Regex, With JQuery , Its possible to extract text alone from a html markup. For that you can use the following pattern.
$("<div/>").html("#elementId").text()
You can refer this JSFIDDLE