I have Some Text Like
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
condimentum pretium nisl. Integer quis tellus nec turpis placerat
scelerisque.
And I have a JavaScript Like
<script language="javascript1.1"
src="http://www.example.com?id=123&msg=how are you"></script>
This Script is also String for me. So how can i replace this JS with adipiscing
My Output should be like this:
Lorem ipsum dolor sit amet, consectetuer < script language="javascript1.1" src="http://www.example.com?id=123&msg=how are you">< /script> elit. Donec condimentum pretium nisl. Integer quis tellus nec turpis placerat scelerisque.
Please, someone let me know the JavaScript for This Problem.
var startingText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. Integer quis tellus nec turpis placerat scelerisque.";
var jsText = "<script language=\"javascript1.1\" src=\"http://www.example.com?id=123&msg=how%20are%20you\"></script>";
var endingText = startingText.replace("adipiscing",jsText);
Edit: I was trying to create a jsfiddle to show a working example, but for some reason it's detecting the script tags inside the JS string and refusing to work properly.
Second Edit:
http://jsfiddle.net/JMwQm/
document.body.innerHTML = document.body.innerHTML.replace('adipiscing', '<script language="javascript1.1" src="http://www.example.com?id=123&msg=how are you"</script>');
Related
I am playing around with dom manipulation and js and I am running into a problem.
Let's say I have <p id = "description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis, felis et sagittis eleifend, justo ante maximus augue, id porta massa elit a ligula. </p>
and I want to write a function that counts a number of repeated letters in a paragraph. I figured out how to do that with a string but not with paragraphs.
function recurringLetters() {
var myParagraph = document.getElementById("description").innerHTML;
}
}
Any thoughts?
This is how far I have gotten.
Hope This Answers your Question.
Just Copy & Paste into an HTML file for testing.
function WORD_COUNT( _THIS_ , _WORD_ ){
var TEMP = _THIS_.innerHTML;
var COUNT= 0;
// IF TEMP search result finds nothing, return is -1, so -1 is our stopping point
while(TEMP.search(_WORD_)>-1){
TEMP = TEMP.replace(_WORD_,'');
COUNT++;
document.getElementById('output').innerHTML=COUNT;
}}
<p onmouseover=WORD_COUNT(this,'us');>PUT YOUR MOUSE OVER ME.<BR> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis, felis et sagittis eleifend, justo ante maximus augue, id porta massa elit a ligula. </p>
<p ID=output>Output area<p>
This question already has answers here:
document.getElementsByClassName doesn't work
(2 answers)
Closed 7 years ago.
I've been trying to find a solution to my problem for days now without any luck, I found this: getElementsByClassName doesn't work but it's not a solution to my problem since I want to access all tags and change them, so here we go:
I want to be able to change the style of tags that are within divs with a certain class. I started out by trying this with an ID on a div and that works exactly the way I want it, but since the page where I will use this will have the same div's appear several times I have to use class instead and I can't get it to work. I have to use javascript and not jQuery.
Example of how it worked with ID:
var images = document.getElementById("test").getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].align = "right";
}
<div id="test">
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet. Vivamus convallis, dolor a euismod scelerisque, nisi lorem placerat nisi, sed euismod ligula eros in lorem. Pellentesque vel ante semper,
convallis ante in, mollis odio.
</p>
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet. Vivamus convallis, dolor a euismod scelerisque, nisi lorem placerat nisi, sed euismod ligula eros in lorem. Pellentesque vel ante semper,
convallis ante in, mollis odio.
</p>
</div>
Example of how I want it to work:
var images = document.getElementsByClassName("test").getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].align = "right";
}
<div class="test">
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
</div>
<div class="test">
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
</div>
I understand that there should be a completely different way of writing the statement when I want to access the classes, but I can't figure out how.
Anyone who knows and can give me some pointers?
The code document.getElementsByClassName("test") gives you a list of elements, not one element. Do a loop (for) on these elements. In this loop, call getElementsByTagName("img").
I have several bios that all look like this:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</p>
Not the prettiest text blocks, but they're auto-generated by the system. I need to iterate through each <p> and take everything after the first set of break tags and wrap that in something like a <div>.
The end result would be:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.</p>
<div class="theRest">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</div>
</p>
Try this (inspired of #dave answer):
$("p").each(function(){
// Add a div after the second <br /> (in the current <p>)
$("br:eq(1)", this).after('<div class="theRest"> </ div>');
// Split each "child" in an array
$(this).contents().filter(function(index, elem){
// Keep only children after the <div />
return index > 3;
// Remove and put them into the <div />
}).detach().appendTo($(".theRest", this));
});
Fiddle
Try this:
$('p').each(function() {
$(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});
But it's not a good enough solution.
For prevent your other p element be wrapped, You should find from any parent element like below:
$('.father').find('p').each(function() {
$(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});
Try this:
$($("p").contents().get(2)).after('<div class="theRest"></div>');
$("p").contents().filter(function(index, element) {
return index > 3;
}).detach().appendTo(".theRest");
Fiddle
Even though the format returned from server is bad from my standards as it complicates things for the given purpose. However, with some tricks there is still a way to do it.
Explanation: select all nodes, discard the first node because that happens to be the text node, then use jquery wrapAll method to take everything after that node and wrap it up in new div.
Demo: http://jsfiddle.net/qe3bm92e/3/
var txt = $('.txt').contents();
txt.splice(0,1);
txt.wrapAll($("<div>").addClass('red'));
You can replace '.txt' with 'p' but it's not a good practice for very obvious reason.
Anyone knows a javascript library to create a first access guide to a web application?
When user login for the first time I want to show a step by step guide, or dialog balloons indicating how to use my web application.
Yes, there is Intro.js which is good:
you simply add attributes to your tags like so:
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
<h4>Section One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>
I need to make each of my <p> have flexible font size with fixed width and height.
Current code
CSS
p{
width:500px;
height:100px;
background-color:#F0F0F0;
margin:10px;
padding:5px;
font-size:24px;
}
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros.</p>
<br><br><br>
<br><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros, faucibus sit amet aliquet ac, varius id eros.</p>
<br><br><br>
<!-- This one is perfect -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros.</p>
Check and try the code in jsfiddle
http://jsfiddle.net/8GNAV/
And this the output I want to reach
http://jsfiddle.net/8GNAV/1/
The general idea is to get overflow:hidden, then keep shrinking the text until the scrollHeight is less than the offsetHeight. Like so:
[].forEach.call(document.getElementsByTagName('p'),function(p) {
p.style.overflow = "hidden";
var f = 24;
while(f > 6 && p.scrollHeight > p.offsetHeight) {
f--;
p.style.fontSize = f+"px";
}
});
Demo