Is there a way to remove the HTML blockquote tag, but keep the text? Basically, if in my code was <blockquote>Hello!</blockquote>, I'd want it to display as Hello! - I don't know if there's a way to filter the blockquotes out or just clone the text, but an answer would be quite helpful!
Use contents with unwrap:
$("blockquote").contents().unwrap();
You can use .html() to achieve this
$("blockquote").html()
Check out this running example
Related
I'm building a Javascript based UI that generates code based on the UI. I got the code generation working. the code is saved in a string. I tried formatting it, indenting it, but I don't know how anymore. Is there a way to put out the code formatted?
For example if I have this string:
"<body><div><h1>Hi</h1></div></body>"
being output like this:
<body>
<div>
<h1>
Hi
</h1>
</div>
</body>
right now I'm outputing like this:
$(".output").text(string);
Take a look at code tag in html. Show your string wrapped by code tags
<code>your string</code>
Or use text area. https://jsfiddle.net/sureshatta/k1atgn6o/1/
If you are trying to achived the formatted output please have a look at Template literals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
.text() use for Change the Text of any Tag.
$(".output").text(string);
.html() is use for Add the String with the Tag.
$(".output").html(string);
If you want to display code that is correctly indented and colorized, you can use a library to do that, such as highlighjs.
I'm not sure it does auto indentation, but the algorithm for that isn't that hard: just add newline and enough spaces when opening a new html tag (recursion will make this way easier).
Also, you can use js-beautify.
This jsfiddle explains it all
https://jsfiddle.net/qphoria/jh7p0oq2/1/
How do I make the div appear as multiple lines without showing the literal <br> tags?
Could probably try
$('#display').html(str);
https://jsfiddle.net/j56vdyfa/1/
Try using .html() instead
$('#display').html(str);
JSFiddle
use .html() will taking the str as html and render it. .text() will only render str as text.
$('#display').html(str);
I'm not experienced with JS, so please excuse the presumably very beginner question.
I have this line:
$el.text(type + "|");
I need to wrap the "|" in span tags such as '<span class="">|</span>' though when I do so it simply prints out the tags as text as opposed to embedding them as HTML wraps.
How do I go about doing this?
Use .html() to print out HTML content, text prints out plain text.
$el.html(type + "<span class=''>|</span>");
or
$el.html(type).append($('<span/>',{text : '|'}));
You can dynamically create your span element using this syntax:
var $el = $('<span>').html('|');
This fiddle contains my solution. The fiddle uses a button to make it clear what is actually happening. I also added a style to the span so you can see it being added.
https://jsfiddle.net/g0n71se7/
$("#test").append("<span> | <span>");
By using the jQuery append you will insert content to the end of an element. You could alternatively use prepend to insert at the start of an element.
I have a trusted source that sometimes returns html that contains this: <p>Â </p> which is displayed in my page as "Â ". It has no class or id to help me select and remove it. I can't reliably use a descendant selector like li > p or add a class to the p.
Is there a way to parse the html page for p tags with matching content, then remove?
I found this solution to a similar problem but it's not working for me. Perhaps it is the wrong approach for me: JavaScript: How to strip HTML tags from string?
What about something like this:
$("p:contains(Â):not(:has(p))").remove();
Try
$(document.body).html($(document.body).html().replace('Â', ""));
WORKING DEMO
How do I get the values in between a DIV tag?
Example
<div id="myOutput" class="wmd-output">
<pre><code><p>hello world!</p></code></pre>
</div>
my output values I should get is
<pre><code><p>hello world!</p></pre>
First, find the element. The fastest way is by ID. Next, use innerHTML to get the HTML content of the element.
document.getElementById('myOutput').innerHTML;
document.getElementById("myOutput").innerHTML
innerHtml is good for this case as guys suggested before me,
If you have more complex html structure and want to traverse/manipulate it I suggest to use js libraries like jQuery. To get want you want it would be:
$('#myOutput').html()
Looks nicer I think (but I wouldn't load whole js library just for such simple example of course)
Just putting all above with some additional details,
If you are not sure about that div having some id is not there on html page then to make it sure please use.
var objDiv = document.getElementbyId('myOutput');
if(objDiv){
objDiv.innerHTML;
}
This will avoid any JavaScript error on the page.