Convert <br> to plain text - javascript

I have a sample html text:
<html>
<body>
<p>This is test<br>THIS IS TEST</p>
</body>
</html>
Now i want to get output like this to paste into excel
This is sample test<br>THIS IS TEST ( i want to get <br> tag like a string )
Because i want to get all content in <p> tag, include all <br> tag.
How can i do that ?
Thank for read.

jQuery html() should do what you need.
var content = $('p').html();
will give you:
This is test<br>THIS IS TEST
See example here

if you want to use jquery, the simplest way to get the result is use "html()" function.
var htmlcontent = $('body').html();
alert(htmlcontent );

You don't need jQuery, do it just with JavaScript:
alert(document.getElementsByTagName('p').innerHTML;)
Or if you want have more p tags:
var parag = document.getElementsByTagName('p');
for(var i=0; i<parag.length; i++)
{
alert(parag[i].innerHTML);
}

Related

How i can insert an element in between in html using javascript?

I have to insert p tag in between other p tag in this example there only 3 p tag are there in my program there can be more so help me out.
**This is Html structure **
<div id="container">
<p>P1</p>
<p>p2</p>
<p>p3</p>
</div>
i want to insert a p tag in between using javascript . Thanks in advance.
You can insert elements through many different ways, but the most flexible is insertAdjacentHTML
and insertAdjacentElement
const secondP = document.querySelector("#container p:nth-child(2)");
const html = `<p>newly added p</p>`;
// add before the second p
secondP.insertAdjacentHTML("beforebegin", html);
// add after the second p
secondP.insertAdjacentHTML("afterend", html);
<div id="container">
<p>P1</p>
<p>p2</p>
<p>p3</p>
</div>
Based on your simplified question, a simpified answer:
const p = document.querySelector("#container p:nth-of-type(1)");
p.innerHTML += "<p>new p tag</P>";
Where as nth-of-type(1) selects the first p tag.
However, this question has been answered many times here, so please next time take some time to do some research.
I have a easy hack to do this in javscript:
document.getElementById("container").innerHTML += "<p>p4</p>";
However, you should be doing it by insertAdjacentElement
tempP = document.createElement('p');
tempP.innerText = "p4";
document.getElementById("container").insertAdjacentElement('afterend',tempP);

Get value inside Div Javascript

ho,
I have a div that I access like so:
var gridcellrowvalue0 = gridcell0.innerHTML;
This returns to me the following div:
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
In my JS I would like to accesss the "DefaultText" variable and I have tried this:
gridcellrowvalue0.innerHTML;
gridcellrowvalue0.getAttribute("data-originaltext");
But none of them work. I'm assuming that getAttribute doesn't work because it is not really an element, it's innerhtml.
My goal is to use the "DefaultText" value in an IF-statement and therefore I simply need it.
I appreciate any pointers, my friends!
You could access your element directly from gridcell0 using gridcell0.querySelector('.DivOverflowNoWrap') instead, like :
var gridcell0 = document.querySelector('#x');
console.log( gridcell0.querySelector('.DivOverflowNoWrap').innerHTML );
Snippet:
var gridcell0 = document.querySelector('#x');
if (gridcell0.querySelector('.DivOverflowNoWrap') !== null) {
console.log(gridcell0.querySelector('.DivOverflowNoWrap').innerHTML);
} else {
console.log('Does not exist');
}
<div id="x">
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
</div>
With Javascript also it can be achieved but I am showing here using jQuery
$('document').ready(function() {
var div = $(".DivOverflowNoWrap");
var text = div.text();
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
The problem is how you access the div in the first place. If you do it like you described (with gridcell0.innerHTML). It will return a string. Not an HTML element.
Therefore you can't use .getAttribute or .innerHTML, because you try to apply it on a string. Access your div differently (querySelector or getElementBy...) and you will be able to use those.
You can use jquery:
$("[class='DivOverflowNoWrap']").text();
$("[class='DivOverflowNoWrap']").attr("data-originaltext")
It's pretty simple:
<html><head></head>
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
<script>
test();
function test(){
var x=document.getElementsByClassName("DivOverflowNoWrap Ellipsis")[0].getAttribute("data-originaltext");
alert(x);
}
</script>
</html>

how to get only numbers inside tags leaving texts

here is my p iam intrested in only phone numbers not texts
<p class="phone-list">
<span>hello</span>
<span>8046033006<script type="text/javascript"> whicVer('vers1');</script></span>
</p>
<p class="phone-list">
<span>hello</span>
<span>12345566<script type="text/javascript"> whicVer('vers2');</script></span>
</p>
I wanted to get only phone number, ie. 8046033006 & 12345566 through this code I am getting
$('.phone-list span:nth-child(2)').each(function()
console.log($(this).text());
);
the output looks like something....
8046033006 whicVer('vers1')
12345566 whicVer('vers2')
I have observed why script tag is not printing? Please help me thanks in advance
You can use regex. Or just use a little span just around the number.
var removedText = initialText.replace(/\D/g, '');
For your case it would be:
$('.phone-list span:nth-child(2)').each(function() {
var num = $(this).text().replace(/\D/g, '')
console.log(num);
);
Here is a little JSFiddle
Assuming the HTML structure is the same for all .phone-list elements, you can retrieve the first textNode from the second child span and get it's nodeValue. Try this:
$('.phone-list span:nth-child(2)').each(function() {
console.log($(this).contents()[0].nodeValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="phone-list">
<span>hello</span>
<span>8046033006<script type="text/javascript">//whicVer('vers1');</script></span>
</p>
<p class="phone-list">
<span>hello</span>
<span>12345566<script type="text/javascript">//whicVer('vers2');</script></span>
</p>
Note that I only commented out the whicVer() function calls as they were giving errors in the snippet.
Once you get the text from the DOM , you can use regex like this
// text from which number will be seperated
var number = "8046033006hriughidhgiudhgiudthgiuhdiutg"
document.write('<pre>'+number.match(/\d+/)[0]+'</pre>')
JSFIDDLE

How to extract content of html tags from a string using javascript or angularjs?

I have a string containing content in some html tags and also some text alone.
It looks like this :
var str = "<p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src="..." height="111" width="333"></iframe><p></p><p><sub>hello blabla</sub></p><p><br></p><iframe src="..." height="444" width="888"></iframe>"
I would like to extract somehow in Javascript or AngularJS only some tag (including content and attributes) then put them into an array.
For example, if I want only <iframe> tag, I should have this :
var array = ["<iframe src='...' height='111' width='333'></iframe>", "<iframe src='...' height='444' width='888'></iframe>"];
If I want <p> tag then :
var array = ["", "<i>blabla</i>","<i><b>blaaaaaablaaaaa</b></i>","","<sub>hello blabla</sub>","<br>"];
Any suggestion ? Thanks !
NOTE : Don't give an answer using Jquery please !
You could create an angular element and get the text out of it.
Example:
$scope.array =[];
$scope.eles=
angular.element(str).find('iframe');
[].forEach.call($scope.eles, function (ctl) {
$scope.name.push(angular.element(ctl).text())
});
here is a demo: http://jsfiddle.net/Lvc0u55v/5122/
Edit
To get all the html of the tag you can do:
angular.element(str).find('iframe');
[].forEach.call($scope.eles, function (ctl) {
$scope.name.push(ctl.outerHTML)
});
demo: http://jsfiddle.net/Lvc0u55v/5123/
try this code:
var iFrameArr= str.match("<iframe>(.*)<iframe>");
var iFrameContent = iFrameArr[1];
You will want to look at splitting up the string with regex using a filter such as '(<iframe>).*(<\/iframe>)'. This will find the tags of and as well as everything in between, putting it into a capture group per iteration found.
Set the html content to the DOM and extract the iframe tag using jquery
Assuming you have a div with id='test' in your DOM
var str = "<div> .... </div> <iframe src=".....">..</iframe>
text blabla
<iframe src="....."> ....blabla2.... </iframe>
....
<p>.....</p>
......";
$('#test').html(str);
var ar=[]
$('#test iframe').each(function() {
var x = $(this).wrap('<p/>').parent().html();//wrap the iframe with element p and get the html of the parent
ar.push(x)//add the html content to array
});
//now ar contains the expected output

trying to add variable for div id. is it possible?

i am trying to use variable inside body. just see below sample code
<body>
<div class="demo">
<script>
var count = 4;
for(i=1;i<=count;i++){
var varSlid = "A"+i;
$('.demo').append('<div id= varSlid ></div></br>');
}
</script>
</div>
</body>
but it is throwing errors. please check and tell me where the error is?
Try This
var varSlid = "A"+i;
$('.demo').append('<div id= ' + varSlid + '></div></br>');
The error is that .demo hasn't finished parsing yet, so you shouldn't be attempting to manipulate it. This can cause serious issues in older versions of IE ("operation aborted", anyone?). Move the script to just outside the <div> tag:
<body>
<div class="demo">
</div>
<script>
var count = 4;
for(var i=1;i<=count;i++){
var varSlid = "A"+i;
$('.demo').append('<div id='+varSlid+'></div><br/>');
}
</script>
</body>
As others have pointed out, you also need the quotation marks to work the variable into your HTML string, although this wouldn't have caused any errors - you would just end up with a bunch of elements all with the same id ("varSlid").
Maybe it's my lack of jQuery-fu... but shouldn't </br> be <br/>?
Also, you shouldn't create 4 elements <div id= varSlid > since the id attribute should be unique.
Edit: You probably intended to use the value of the variable varSlid as the id attribute, but rit now it's part of a hardcoded string literal. You'd want to something more like:
$('.demo').append('<div id="'+varSlid+"'></div><br/>');
Try this...
$('.demo').append($('div').attr('id', varSlid)).append('<br/>');
Also wrap this entire function in on dom ready like
$(function(){
//your code here...
});
change: $('.demo').append('<div id= varSlid ></div></br>');
to: $('.demo').append('<div id=' + varSlid + ' ></div></br>');
It's : $('.demo').append('<div id="' + varSlid + '"></div></br>');
I'm not real clear on the OP's original question, but this fits the title.
HTML5 has a data-* attribute, where the * represents your data. I've had luck with this passing Web.py (python) variables from the templator to js functions.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
<!DOCTYPE html> <!--declare we are using HTML5-->
<html>
<head>
<script>
var jsVersionData = ''; //create a global variable for example simplicity
</script>
</head>
<body>
<div id="stored-variable" data-stored="7">
<script>
jsVersonData = document.getElementById("stored-variable"); //get the variable from the div
</script>
</div>
<script>
var myStr = jsVersonData.dataset.stored; // the variable
var myInt = Number(myStr); // convert the variable to int
alert(myInt + 1);
</script>
</body>
</html>

Categories