Get sub-html element in [innerHtml] | Angular 6 for highlighting text - javascript

Angular 2/4/5/6:
I have a div :
The innerHtml is actually html that has multiple tags in it, for example:
<H1> Title of note /H1>
<P> This is a example note </P>
How would I get the reference of these sub html elements inside the innerHtml on click or highlight in the typescript file in Angular?
The purpose of this is to add a highlight span to the highlight portion of a html element, and its very difficult to modify the innerHtml before it is recieved by the angular side.
I was wondering if there is a solution similar to using nativeElement, but since i can't add #var to any of the subelements I am not sure what to do.

I am not totally sure of what you mean, but I would use a JQuery selector to add the class with the CSS style you want to apply to highlight the text.
If you don't want to use JQuery, you still can manipulate the DOM via document commands.

Related

Change innerHTML to id and add div to <p> with querySelectorAll

I'm new to javascript. I'm trying to have my h1 show the title of the document instead (which is also Document by the way). Instead, it recognises 'title' as string and not as an id. I don't know what I'm doing wrong here. I also tried to add my roze div class to by using querySelectorAll, but this also is not working. Who can help me? I'm sure its something simple but I've been trying to understand this for the past 3 days...[][][][]
I've tried to use no '' in ('h1'), ('title') and ('p'). I've tried using . and # before ('h1'), ('title') and ('p'). I've tried removing id from title tag and h1 and have googled for methods but I still can't find an example of the specific method I have to do.
To get an DOM element by its id you should use document.getElementById('title'). To edit its text you should use its textContent property. The title of the docuemnt is stored in document.title.
Try the following markup:
document.getElementById('title').textContent = document.title
<h1 id="title">Dit is h1</h1>

Is there a way to apply css to part of the element?

I am looking for a way to apply new CSS to only part of the element.
For example. The original HTML looks like
<p>123456</p>
I want to make only 456 into bold.
Of course, I can do it by adding another tag into 456 like
<p>123<b>456</b></p>
But in my application, I do want not to change the original DOM structure. By adding a new tag, I changed the DOM structure.
To do that, I am thinking of adding new custom attribute to the existing tag like
<p data-wms="e-3">123456</p>
Here data-wms means that there are special part and e-3 means that from index 3 character (it is 4 here) to the end will have a special attribute (like bold in this example)
Now I have all the information about where to change inside the element.
But still, how can I do that with javascript without adding a tag, without changing dom.
Thanks
You can use the span element to do so, it's made specifically to handle inline styling while mantaining the overall structure.
An example would be:
<p>123<span class="bold-highlight">456</span></p>
Thanks to everyone's advice, I researched more, especially about nth-letter.
Though nth-letter is exactly what I want, I found that it is still just proposal, not implemented in any browser.
Thus, there is no way to applying different css letter by letter in one text element without embracing each letter with span tag at this moment (2021-March). I hope that there will be nth-letter in the near future.
I think that I have to re-design my project...
if it's a static page and you want to change a style for specific text in a specific tag like the following case
<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>
let's say you want just style the third element, you can change it by the following code using jQuery for sure you can use JavaScript but jQuery will help you to make your code shorter
$( "p:nth-child(3)" ).css("color","#f00");

Google Tag Manager: CSS selector for just a segment of text inside a <li> element

I am attempting to use a CSS selector in Google Tag Manager to track the stock number of a product.
screenshot
The data is in an unordered list, and the stock number is in its own separate li element. I do know how to target the li element I want, only it pulls in "Stock #: 38194" when I JUST want the stock number. Here's how the code looks:
<li><span>Stock #:</span> 38194</li>
Is there a way I can format the CSS selector - or perhaps use custom JS - to tell GTM to pull that number outside the span tags, and not the words "Stock #"?
In a perfect world, I could put the stock number in its own set of span tags, and give those an id or class, but I have no access to the back end.
Thanks for your help!
There is no css selector for textnodes, so you cannot target text that is not wrapped into an element. Probably the easiest way to do this would be to use a DOM variable to return the text node of the li element (being text it will not contain the markup for the span) and then use a custom javascript to replace the unwanted text, so: {{myDOMvariable}}.replace("Stock #","");

How to target Angular UI library elements?

This probably applies to other UI libraries like Prime-NG and the like, but I'm using ng-lightning.
I am trying to grab the ngl-checkbox element with a querySelector in one of my unit tests.
fixture = TestBed.createComponent(Component);
fixture.debugElement.nativeElement.querySelector('ng-lightning element here?');
I tried adding an id attribute on the ngl-checkbox and also the input within the ngl-checkbox tags, but that doesn't work. Since the ng-lightning element renders into a bunch of different things, what do I need to pass into the querySelector to get that checkbox?
Another thing is how do I target the ng-lightning element in an external css file? I can't just target that element like a regular h1 tag.

How can I check if a nested tag is allowed within it's parent tag?

If I'm adding a tag in JavaScript to another tag how can I check to see if it's valid.
IE I have this block:
Using JQuery:
var fragment = $("<p>Some text is <strong>here</strong></p>");
Is there a way using either JavaScript or some library to query this fragment and get a list of allowable tags?
For instance:
fragment.wrapInner('<em></em>');
Will generate valide HTML, but:
fragment.wrapInner('<div></div>');
Won't as div is not allowed inside a P tag.
The reason I want to do this is related to Range#surroundContents, as it's not letting me insert span tags directly inside divs, only insides p tags and the reverse is true as well, but I need a solution that will insert the correct type element inside the tag. IE div should not insert into p and the reverse, but these are far far from the only cases I need to concern myself with, as I'm dealing with generic content, so I need a general solution.

Categories

Resources