How can I count how many lines of text a <pre> tag contains?
I want to append a absolute div with line numbers next to it.
you could use the javascript split function to count the line breaks.
$('pre').html().split(/\n/).length
better
$('pre').html().match(/\n/)
Using jQuery
$('#preID').text().split('\n').length
using plain javascript
document.getElementById('preID').innerHTML.split('\n').length
example at http://jsfiddle.net/gaby/tdekQ/
This will work as long as you don't have any <br> tags in your <pre> element:
var numlines = $('#mypreelement').text().match(/\n\r?/g).length + 1;
Example: http://jsfiddle.net/jtbowden/3QThm/
You can handle the <br> tags by counting them separately:
var pretext = $('#mypreelement').html();
var numlines = pretext.match(/\n\r?/g).length + 1;
numlines += $('#test br').length;
Example: http://jsfiddle.net/jtbowden/3QThm/2/
Other tags in the <pre> will cause you headaches.
Related
I am new to javascript. I was thinking getelementbyid but i don't know how to make it work
Like the title, here is what I mean
For example I have in HTML:
<p>fw_93</p>
<p>fw_94</p>
<p>fw_93</p>
So what I want is to make script to replace those fw_93 fw_94 to what I want.
For example
Instead of displaying "fw_93" I want it to display "9.3". Same with fw_94 to 9.4
Replace fw_ with nothing, divide the number by 10:
Array.prototype.forEach.call(document.getElementsByTagName('p'), function(el) {
el.innerHTML = parseInt(el.innerHTML.replace(/[A-Za-z_]*/, '')) / 10;
});
<p>fw_93</p>
<p>fw_94</p>
<p>fw_93</p>
Okay so select the tags.
Loop over the collection
read the html
match the string
replace the html
var ps = document.querySelectorAll("p");
for (var i=0; i<ps.length; i++) {
var p = ps[i];
var txt = p.innerHTML; //.textContent
var updated = txt.replace(/.+(\d)(\d)/, "$1.$2");
p.innerHTML = updated;
}
<p>fw_93</p>
<p>fw_94</p>
<p>fw_93</p>
Using JQuery
Not sure why I did it with JQuery, guess I wasn't paying enough attention. No point in me re-writing as there are already good answers in JS. Though I will leave this in case it's of use to anyone that is using JQuery.
You can loop though each <p> element and covert the contents, something like this:
$("p").each(function() {
var text = $(this).html();
var text = text.substring(text.indexOf("_") + 1);
var text = text[0] + "." + text.substring(1);
$(this).html(text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>fw_93</p>
<p>fw_94</p>
<p>fw_93</p>
You may need to add validation depending on how reliable your input is.
Note that the code makes the following assumptions:
There will always be a _ followed by at least 2 digits
The . will always go after the first digit
Your HTML:
<p id="p1">init_value</p>
Your JS:
document.getElementById("p1").innerHTML = "new_value";
My goal is to take an array, and write each element onto a HTML page using a <span> element with .textContent using a for loop. Only problem is that instead of:
Error1
Error2
I get:
Error1<br/>Error2<br/>
HTML code:
<p><span id="EBox"></span></p>
JS code:
var EBox = document.getElementById("EBox");
var eArray = []; //Elements get added via push
for (var i = 0; i < eArray.length; i++) {
EBox.textContent = EBox.textContent + eArray[i] + '<br/>';
}
The entire system works, but it just ends up as one jumbled sentence. What can I change to make it add the line breaks? I've tried '<br>', '<br />' and '\n' with similar results.
Use .innerHTML .insertAdjacentHTML instead of .textContent as .textContent does not parse the HTML <br> but simply outputs it as text.
Also if you're appending to the HTML each time, it's better to use .insertAdjacentHTML as it does not reparse the previous HTML, thus making it much faster and less error prone than .innerHTML.
var strArr = ['foo', 'bar'];
strArr.forEach(function(str) {
document.querySelector('div').insertAdjacentHTML('beforeend', str + '<br>');
});
<div></div>
Instead of .textContent use .innerHTML.
I would also recommend building up a string first before using .innerHTML so the DOM isn't rebuilt each time...
var EBox = document.getElementById("EBox");
var eArray = []; //Elements get added via push
var html = "";
for (var i = 0; i < eArray.length; i++) {
html += eArray[i] + '<br/>';
}
EBox.innerHTML = html;
I found a better answer here:
https://developer.mozilla.org/pt-BR/docs/Web/CSS/word-break
You can use CSS to do this, see below:
span{word-break: break-word;}
or
span{word-break: break-all;}
BREAKE-WORD will put the next word in a new line and BREAKE-ALL will break the text justifying the content, when it gets bigger than the div or span container.
I hope I'd help :)
I got like;
<p>Variable Text</p>
And I want to it to be;
<p>Variable <span>Text</span></p>
Is this possible by a javascript function? / or jQuery.
Oh yeah, and the p-element got an ID and the text inside the p-element is variable but always consists of 2 words. I want a span around the last word of the text by a javascript function.
Try this
var txt = "Hello bye";
var dataArr = txt.split(' ');
var paragraph = document.getElementById("pid");
paragraph.innerHTML = dataArr[0]+ " <span>"+dataArr[1]+"</span>";
Here is a demo
It's possible (the following assumes the p has an ID, like you said), in it's simplest form you can just do:
var paragraph = document.getElementById("pId");
paragraph.innerHTML = "Hello <span>World</span>";
Or if you want to use jQuery:
$("#pId").html("Hello <span>World</span>");
Or (as you said in comments, you want to keep the existing content, but wrap the last word in a span, you can do:
var newHTML = $("#pId").html().replace(" ", " <span>");
$("#pId").html(newHTML).append("</span>");
DEMO
I would like to share a jQuery solution, which is regardless of any words defined in your p element
$("p").html(function(){
var mystring= $(this).text().split(" ");
var lastword = mystring.pop();
return mystring.join(" ")+ (mystring.length > 0 ? " <span>"+ lastword + "</span>" : lastword);
});
Demo
In the demo above, I am splitting the string first, than am using pop to get the last index in the array, and than am adding span element and returning the string using join
$("document").ready(function(){
$("p").append("<span>world</span>");
});
With JQuery append
$("#paragraphId").append('<span>Text in span</span>');
jQuery is easier, and personally I think it's better to use than only javascript:
jQuery:
$("#paragraphID").append("<span>World</span>");
HTML:
<p id="paragraphID">Hello</p>
I have this HTML code:
<div>
756
<span></span>
</div>
Using JavaScript I want to retrieve the number 756 from within the div tag and increment it by 1. What is the best method of filtering out the <span> from within the div tags so I get only the number?
Try this:
var div = document.getElementsByTagName("div")[0],
content = div.textContent || div.innerText;
textContent is supported by all browsers except IE8- and innerText is supported in all browsers except FF4-. So using both, you should get a stable result.
http://www.quirksmode.org/dom/w3c_html.html
Both properties return the text content with stripped HTML tags.
Example: http://jsfiddle.net/HnWxk/ (tested in chrome/ff/ie7)
Now, if you want to increment it, just do:
content++;
It should cast a Number: http://jsfiddle.net/HnWxk/3/
You can use .innerText to do so.
var div = document.getElementsByTagName("div")[0];
var inner;
if(div.innerText) {
inner = div.innerText;
} else {
inner = div.textContent;
}
var number = parseInt(inner);
number++;
alert(number);
Fiddle.
<div id="mydiv">
756
<span></span>
</div>
<script>
var textNode = document.getElementById("mydiv").childNodes[0];
var number = parseInt(textNode.nodeValue);
textNode.nodeValue= number + 1;
</script>
DEMO
Just an other way to do it without the browser incompatibility of innerText and textContent. I use innerHTML after I use a regular expression to extract the number, Also it is recommended to always define the radix when you use parseInt (will simply avoid some weird surprise I let you discover) and finally incrementing the value.
var theNum = parseInt(document.getElementById('someDiv').innerHTML.match(/\d+/), 10);
alert(theNum+=1)
The best solution would be to wrap the number in its own <span>.
If that is not possible (you don't create the HTML code), you can iterate over all child nodes of the <div>. One of them will be the text node you want to target.
<div id="number">
756
<span></span>
</div>
d = document.getElementById("number")
n = parseInt(d.innerHTML)+1;
alert(n);
Assuming this html code:
<div id="someDiv">
756
<span></span>
</div>
You can use this (with jquery):
var div = $("#someDiv");
div.text(parseInt(div.text()) + 1);
I used split on the text to get the number.
Also used jQuery to get the text, you can use the other methods people used here.
var divText = $('div').text();
var contentArray = divText.split('\n');
var yay = parseInt(contentArray[1].trim(), 10);
alert(yay);
alert(yay++);
See fiddle here.
The best way would be wrap the number in an element, but you can workaround with this:
var div = document.getElementById('div')
var num = parseInt((div.innerText) ? div.innerText : div.textContent);
div.childNodes[0].nodeValue = num + 1;
Basically I have a load of H1 H2 and H3 tags on a website and I want to be able to put a span around PART of these heading tags.
At the moment I have this:
jQuery(document).ready(function(){
// get all headings first
jQuery('h1, h2, h3').each(function(){
// get the text
var theHtml = jQuery(this).html();
// split by spaces
var theWords = theHtml.split(" ");
// count the words
var wordCount = theWords.length;
var newHtml;
if(wordCount < 2){
// only one word
newHtml = theHtml;
}
else if(wordCount == 2){
// word count is 2...
newHtml = theWords[0]+" <span style='color: #000'>"+theWords[1]+"</span>";
}
else {
// add the first two words:
newHtml = theWords[0]+" "+theWords[1]+" <span style='color:#000'>";
// need to loop through the array now
for(var i = 2; i<wordCount; i++){
newHtml = newHtml+theWords[i];
if(i+1 < wordCount){
newHtml = newHtml+" ";
}
}
//end
newHtml = newHtml+"</span>";
}
jQuery(this).html(newHtml);
});
});
Which works quite well. But now I have a problem which is sometimes there is an a element or a div (for an inline editor if logged in as an admin) in the titles which is breaking this...
How would I get around this? I need to potentially get all the html from the header tag, strip the HTML tags, add the span around the latter part, then put the html back in!
Any ideas?
Thank you.
Edit:
This is what the problematic html looks like:
<h1 class="entry-title"><div data-type="input" data-post_id="12" class="fee-field fee-filter-the_title">Bristish Society of Blood and Marrow Transplantation</div></h1>
And like this:
<h2 class="entry-title"><div data-type="input" data-post_id="62" class="fee-field fee-filter-the_title">About the Registry</div></h2>
But if not logged in as an administrator then the div's go away.
Hey! Nice one, I think this is possible with regular expressions. I made a quick example for you, covering the a and the div for the biggest part. All spaces that are not meant as real whitespaces (in the tags) are replaced with symbols like ___ or ---, which are changed back afterwards.
Take a look at this jsfiddle!
theHtml = theHtml.replace(/[\s]+\</gi,'<');
theHtml = theHtml.replace(/\s+[\'\"]/gi,'___');
theHtml = theHtml.replace(/[\'\"]\s+/gi,'---');
theHtml = theHtml.replace(/a\s/gi,'a_');
theHtml = theHtml.replace(/div\s/gi,'div_');
and backwards:
newHtml = newHtml.replace(/___/gi,' "');
newHtml = newHtml.replace(/---/gi,'" ');
newHtml = newHtml.replace(/div_/gi,'div ');
newHtml = newHtml.replace(/a_/gi,'a ');
COMMENT after your edit
This will not work for the example h1 and h2 you posted. This is just an idea of how to approach this. I hope this will help you! Good luck!
COMMENT2 after my own edit ;-)
It does work, I just forgot to add case insensitivity and recursivity! It's just not finished yet. There are more checks needed such as ' or " etc. Here you go, I hope this will get you on the right track.
Please use the jQuery .text() function to strip out all the text within any particular H1, H2 tags etc. Other HTML inside these tags will be ignored.
But, i'm not sure how you will restore all the Inner HTML tags back.
Have you tried jQuery's wrapInner() function? I think it does what you're looking for in just one line.
$('h1, h2, h3').wrapInner('<span></span>');
If you know what class will be in the "inner" HTML element, you can just grab that.
var outer = $('.entry-title');
var html = html.find('.fee-field');
if(html === null){
html = outer;
}
// html will either be your `h` element or your inner most element.