Considering I want to create this HTML dynamically:
<li><img src="a"/>some text</li>
Some text is a text string that is potentially unsafe, let's say is stored in variable 'some_text'.
The idea is to call $('<li>').append($('<img>').attr({src:"a"}), ... );
Using $(some_text) is bad idea because it's unsafe.
Using text(some_text) doesn't work because the text is not an only child of an element.
I do not want to wrap the text into a <span>
I do not want to invent/use a function that sanitizes or escapes the string
There are many ways, but possibly the simplest is to first add the text content to the li element and then prepend the image to get the correct order.
$('<li>').text(some_text).prepend($('<img>').attr({src:"a"}), ... );
Related
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.
I'm trying to develop a script that will take user submitted HTML, loop through it to identify matching tags, make adjustments to those matched tags, and then spit out the resulting HTML as plain text that the user can copy. The end goal here is to replace all href's in a submission and replace them with different URL's.
So for example, this:
Link A
<a data-track="false" href="http://example.com/">Link B</a>
Link C
Becomes this:
Link A
<a data-track="false" href="http://example.com/">Link B</a>
Link C
My first thought was to take the submitted HTML from the <textarea> field and put it in a variable. At this point the HTML becomes a string and I was going to loop through it with a regex to find matching tags. My issue was that I needed to find all <a> tags that did NOT include the attribute data-track="false". And as far as I can tell that's impossible with regex since each link isn't going to be on its own line.
My second thought was to loop through it using jQuery where I could use something like this:
$("a:not([data-tracking='false'])");
But I can't use jQuery like this on a string, right? It needs to be in the DOM.
I'm unsure of the best way to go about doing this. Maybe another language would prove helpful, but other than HTML and CSS, javascript and jQuery are the only ones I'm experienced with.
Any and all help would be greatly appreciated.
I think your question is similar to
Convert String to XML Document in JavaScript
The answer is that you can wrap it in a jQuery object. Then use jQuery's normal DOM manipulation methods on it.
var myhtml = $($('#main-input').val());
myhtml.find('a').each(function () {
alert($(this).text());
});
if it's a top level element you need to use filter instead of find.
You can create a jQuery object from html strings outside of the DOM and maniuplate it just the same as if it was in the DOM.
Simple example:
var html='<div><p>ABC</p></div>';
alert( $(html).find('p').text() ); // alerts "ABC"
Or
var $div= $('<div>').append(html).find('p').after('<p>DEF</p>');
var newHtml= $div.html();
Will return
<div>
<p>ABC</p>
<p>DEF</p>
</div>
Conclusion, I would loop through a jQuery object created from your html and do what you need using jQuery methods
Yes the question sounds weird, but what I wanna achieve is when I am appending using
.html() function I want certain part of it to behave like
.text() function.
For example in this fiddle http://jsfiddle.net/KZBAy/ ` in
$("#htmltest").html("<ul><li>"+**unescape(escape(testvar))**+"</li></ul>");`
I want the +unescape(escape(testvar))+ to behave as text. i.e the html tags in it should be treated as text, it should not be parsed. This is a simple <li> example please provide a generic solution which can be used for all tags like appending into <div> tag <table> tag etc
Are there any tags like CDATA in html which can instruct the browser not to parse the text inside it??
Well after a lot of googling i found that it was <xmp> tag !!
Though its deprecated it has no exact substitute so far !!!
so where ever we want to instruct the browser not to parse we can prefix and suffix with tag
$("#htmltest").html("<ul><li><xmp>"+unescape(escape(testvar))+"</xmp></li></ul>");
http://jsfiddle.net/EgQSj/1/
You can use html() to set the element markup, then find() the container you want to insert text into and invoke text() on it.
In your case, something like:
$("#htmltest").html("<ul><li></li></ul>").find("li").text(testvar);
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.
I'm used to using jQuery's .append() method to add text or HTML onto the end of a pre-existing element. I'm currently using jQuery's .text() to escape strings that could potentially contain HTML. Unfortunately, there doesn't seem to be a jQuery method that will append the results of the .text() method to an element instead of replacing its contents.
Is there a way to append, instead of replace, this escaped text to an element? Or is there a better way to escape strings containing HTML?
Thanks.
- EDIT -
A little more context: I'm building an HTML string dynamically, and so I'll need to be able to add multiple elements with escaped content programmatically.
As I have tried many ways, I think the following method is the cleanest way to add text to whatever node you want.
no stock tag needed, only plain text, which will help to avoid potential problems
$(document.createTextNode("SomePlainText")).appendTo(p);
You could create a dummy element to hold the result of .text() which can then be appended to your destination element:
$('<div/>').text('your <span>html</span> string').appendTo(...);
You could just use
$(whatever).text($(whatever).text() + whatever_you_want_to_append);
EDIT for the fiddle in my comment, try this:
for ( /* some looping parameters */ ) {
$('<li></li>') // create an li
.text(stringWithHtml) // pass it the text, as text not html
.appendTo('#thisIsWhatINeed'); // append it where you want it
}
jsFiddle