In HTML:
<div class="field" ng-repeat="field in fields ">
<strong>{{field.fieldName | json}}: {{field.itemCount | json}}</strong>
<p ng-switch="field.type">
<p ng-switch on="NUMBER">
{{field.numberStats | json}}
</p>
</p>
</div>
Is there a way to specify | json just once somewhere and let the expression to be evaluated correctly?
thanks a lot
json filter is not solution for style issues either worst. Redefine html structure better, as quick fix, try to change all <p> to <div>. And also your markup is incorrect, <p> tag cannot nest
Related
Hi i have been trying to get all the text part within the div - p tags up to the hr tag so somebody gave this xpath
//div[#class="entry"]/*[not(preceding-sibling::hr | self::hr)]/text()
which works fine but this ignores the text part within the <.a> tag in the p tag
any ideas to grab that text as well?
<div class="entry">
<p> some text</p>
<p> some text2</p>
<p> some text3</p>
<p> some text4
<a href='somelink'> this text here i want to get through xpath</a>
some text5
</p>
<hr>(up to this hr tag)
<p> some text5</p>
<hr>
<p> some text6</p>
</div>
One way might be //div[#class="entry"]/*[not(preceding-sibling::hr | self::hr)]//text() though I might prefer to simply select the elements //div[#class="entry"]/*[not(preceding-sibling::hr | self::hr)] and use the string value.
You can simply pull data based on xpath.
//div[#class="entry"]/p[0]
//div[#class="entry"]/p[1]
//div[#class="entry"]/p[2]
//div[#class="entry"]/p[3]
//div[#class="entry"]/p[4]
//div[#class="entry"]/p[5]
I'm trying to populate two columns with some content in the following way (this is expected behavior)
<div id="identifier_0"></div> | <p id="paragraph_0"></p>
|
------------------------------| -------------------------
<div id="identifier_1"></div> | <p id="paragraph_1"></p>
|
|
|
----------------------------- | -------------------------
<div id="identifier_2"></div> | <p id="paragraph_2"></p>
----------------------------- | -------------------------
every paragraph_n is provided by my Rails backend. Every identifier_n is autogenerated on the fly by a javascript script (because they identify the paragraph to the right, which might change because of user input)
I want the paragraphs column to be contenteditable=true as a whole (so users can join paragraphs or split a paragraph into many, or basically edit the text inside) and identifier column to be contenteditable=false, so my javascript is the only one allowed to change them.
Currently it looks like this:
<div id="container" contenteditable="true">
<p id="paragraph_0" class="paragraph"></p>
<p id="paragraph_1" class="paragraph"></p>
<div id="identifier_0" class="identifier"></div>
<div id="identifier_1" class="identifier"></div>
</div>
But this makes both columns, the paragraphs and the identifiers, inherit the contenteditable=true attribute. And I only want the paragraphs column to have it.
Is there a way to do what I want?
Thanks in advance
(Answer in comments ==> just add contenteditable="false" to the identifier_n, and it will do it even if wrapped inside a contenteditable="true" div)
I would like to know whether the HTML standard defines how overlapping tags are split into the DOM tree representation.
For example:
<a href="aaa">
abcd
<div style="font-style:italic;">
efgh
</a>
ijkl
</div>
Here, <a> and <div> tags overlap, but inspecting the page in Chrome I see this:
<a href="aaa">
abcd
</a>
<div style="font-style:italic;">
<a href="aaa">
efgh
</a>
ijkl
</div>
Is this behavior defined in the standard or is it browser specific?
Browsers usually have feature which completes non-closed and non-opened tags unless they're self-closing like <input />.
You already have an answer in and example in your question.
I don't know where it's described so cannot post you reference link.
But this is how it works.
I have a lot of html and want to process it via xpath. There are two possible ways text can occur:
<div>
The Text
</div>
<!-- OR -->
<div>
<span>The Text</span>
</div>
<!-- BUT NOT -->
<div> other text
<span>The Text</span>
</div> other text
Is there a way I can fetch "The Text" with a single xpath expression?
edit:
concrete structure:
<div id="content">
<h1>...</h1>
<div>
...
</div>
<div>
<span>The Text</span>
</div>
I'm getting the content node via //div[#id='content'][1] and reuse it for other purposes. On this context-node, I tried to execute ./div[2]/span/text() | ./div[not(span)][2]/text(). It works if there is no span, but returns blank/null if there is a spawn. Im using the Java xpath implementation. The div is always the second one of the content-node.
div/span/text() | div[not(span)]/text()
should do the trick. This selects text nodes that are children of the <span> (if there is a <span>), as well as text nodes that are children of the <div> if there is no <span>.
You'll have to modify the div parts to reflect the context from which you're evaluating the XPath expression. If you want to do this with all <div> elements in the document, then change div to //div.
Update:
Based on the new context information you posted, the above XPath should be modified to:
./div[2]/span/text() | ./div[2][not(span)]/text()
However I don't see why your version is returning no text when there is a <span> element. Can you give more context -- your java code that's evaluating the XPath; maybe a more detailed snippet of your input HTML? Is the sample input HTML really exactly representative of your actual input? Could there be another </div> in there that's going unnoticed?
I was wondering if there is a tool or generator that could auto indent my code after production from:
<div>
<div>
<p>
</p>
</div>
</div>
to:
<div>
<div>
<p>
</p>
</div>
</div>
Does something like this exist?
Try js-beautify.
It's a JavaScript beautifier but works for HTML too.
You can try Pretty Diff, which can also handle JSLT type tags.