How to get Html Element's Text - javascript

I want to extract the text part of the html.
If I have <p>ABCD</p>
I want the out put to be ABCD
Something like,
var html='<p>ABCD</p>';
var str = convertToString(html);
Hope, I will need a function which converts from html to string, or maybe extract string from it.

You can use jQuery to extract the text content from the string
var html = '<p>ABCD</p>';
var str = $(html).text();//get a jQuery reference and then read its text content
console.log(str)

All you need is a selector(id,class name etc) of get the required element of DOM and use .text() to get text part of the html.
HTML
<p>ABCD</p>
Jquery
var str = $('p').text(); // $('p') "p" is a selector to select p element(s)
console.log(str)
DEMO

JavaScript way
var txt = document.getElementById("demo").innerHTML;
alert(txt);
<p id="demo">Test text</p>

var html = '<p>ABCD</p>';
var str = $(html).text();
console.log(str);
This would do the task.

Related

How to ignore HTML tags in innerHTML attribute?

I'm making a messenger and my messages don't ignore HTML tags because I simply past a text from input in innerHTML of message. My code:
function Message(sender) {
...
this["text"] = "";
...
this.addText = function (text) {
this["text"] = text;
};
...
};
And here I display it:
...
var chatMessageText = document.createElement("p");
chatMessageText.innerHTML = message["text"];
...
What can I do for ignoring HTML tags in message["text"]?
Update Node#innerText property(or Node#textContent property).
chatMessageText.innerText = message["text"];
Check the difference of both here : innerText vs textContent
Refer : Difference between text content vs inner text
You can't. The point of innerHTML is that you give it HTML and it interprets it as HTML.
You could escape all the special characters, but the easier solution is to not use innerHTML.
var chatMessagePara = document.createElement("p");
var chatMessageText = document.createTextNode(message["text"]);
chatMessagePara.appendChild(chatMessageText)

Prevent html tag creation during html() using Jquery

I am having a string "<F1>" and whenever I add it as html to a particular div using jquery's html(), as
var str = "<F1>";
$("div").html(str);
It generates html for div as
"<f1></f1>"
But I dont want such tag creation.
I need to have div with html as
"<F1>"
It will be appreciated if somebody guide me, to achieve this. :(
Use .text() instead of .html().
var str = "<F1>";
$("div").text(str);
Fiddle: http://jsfiddle.net/6942a/
To escape the HTML entities in str and use .html() you can do the following:
var str = "<F1>";
str = $("<div/>").text(str).html();
$("div").html(str);
Updated jsfiddle: http://jsfiddle.net/6942a/3/
Use this :
HTML:
<div></div>
<input type="text">
<input type="button" value="ADD">
jQuery :
$(function(){
$('input[type=button]').click(function(){
var text = $('input[type=text]').val();
text =text.replace('<','&#60');
text =text.replace('>','&#62');
$("div").html(text);
});
});
Demo
For more information see html entities
Try this
var str = '<f1>';
var res = str.replace("<", "<");
res=res.replace(">", ">");
$("div").text(res);
Fiddle

Adding bold tags to a string of html

I have a string of html in javascript/jquery.
var str = '<div id="cheese" class="appleSauce"> I like apple and cheese</div>';
I want to make the string 'apple' bold. So I do:
str = str.replace('apple','<b>apple</b>');
but this breaks the html part of the string. I get:
<div id="cheese" class="<b>apple</b>Sauce"> I like <b>apple</b> and cheese</div>
How can I replace all occurrences of a string in the text of an html string without changing the matches inside of html markup?
var e = $('#cheese');
e.html(e.text().replace('apple','<b>apple</b>'));
Working Fiddle
Create an element, jQuery element in this case, and set the innerHTML property:
var el = $('<div id="cheese" class="appleSauce"> I like apple and cheese</div>');
el.html(el.html().replace('apple','<b>apple</b>'));
You can do it like that
var str=str.replace(new RegExp(/(apple)$/),"<b>apple</b>");

Get text of div

I want to get the text of the next id (the text is: "Show More").
<div id="show_more_less" onclick="Show_More_Less();">Show more</p>
function Show_More_Less() {
var str = document.getElementById('show_more_less').text;
}
I tried: .value but it doesn't work.
To get the text of an element in a cross browser way, you can do this :
var e = document.getElementById('show_more_less');
var text = e.textContent || e.innerText;
Try innerHTML:
var str = document.getElementById('show_more_less').innerHTML;
Also you have an opening <div> tag and a closing </p> tag which is inconsistent. You probably meant:
<div id="show_more_less" onclick="Show_More_Less();">Show more</div>
Should make some checks to see if childNodes[0] exists and if it's a text node, but basically:
var str = document.getElementById('show_more_less').childNodes[0].nodeValue;

Extract Part of Title Tag

Does anyone know how to extract part of the title tag using Javascript? Like, extract all text in the title tag up to a dash character, and not text after the dash character.
Example
<title>Extract this text-But not text after the dash</title>
Try this:
document.title.split('-')[0]
var title = document.title;
var dashIdx = title.indexOf("-");
var part = title.substring(0, dashIdx);
document.title.substring(0, document.title.indexOf('-'))
var dTt = document.title;
dTt.substring(0, dTt.indexOf('-'));
reference: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String#Methods

Categories

Resources