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>
Related
how would use replace in node js?
HTML:
<p> https://www.abc.co/ Lorem ipsum dolor sit amet, praesent justo sem suscipit dolor,https://www.abc.co/ maecenas pellentesque ligula vestibulum in vivamus eu </p>
I try:
const variableabc = document.getElementsByTagName('p');
const result = variableabc.replace('/(https?:\/\/[^\s]+)/g','$1');
Expected output:
https://www.abc.co/
https://www.abc.co/
So I'm making a firefox addon to highlight words and reg. expressions and I'm having some troubles optimizing it.
This was the 1st attempt:
function highlight (searchText, replacement) {
var walker = document.createTreeWalker(document.body);
while(walker.nextNode()){
if(walker.currentNode.nodeType === 3 && searchText.test(walker.currentNode.nodeValue)){
var html = walker.currentNode.data.replace(searchText, replacement);
var wrap = document.createElement('div');
var frag = document.createDocumentFragment();
wrap.innerHTML = html;
while (wrap.firstChild) {
frag.appendChild(wrap.firstChild);
}
walker.currentNode.parentNode.replaceChild(frag,walker.currentNode);
}
}
}
But the walker.currentNode.parentNode.replaceChild(frag,walker.currentNode); line replaces the current node so the while(walker.nextNode()) stopped working.
I've solved it like this but i was looking for a cleaner solution:
function highlight (searchText, replacement) {
var walker = document.createTreeWalker(document.body);
var nextnode=true;
while(nextnode){
if(walker.currentNode.nodeType === 3 && searchText.test(walker.currentNode.nodeValue)){
//1~2 ms
var html = walker.currentNode.data.replace(searchText, replacement);
//~11-12 ms
var wrap = document.createElement('div');
var frag = document.createDocumentFragment();
//~11-12 ms
wrap.innerHTML = html;
//~36-37 ms
while (wrap.firstChild) {
frag.appendChild(wrap.firstChild);
}
//73~74 ms
var nodeToReplace=walker.currentNode;
nextnode=walker.nextNode();
nodeToReplace.parentNode.replaceChild(frag,nodeToReplace);
//83~85 ms
}else{
nextnode=walker.nextNode();
}
}
}
Also I'm trying to improve performance so I've made some test to look for the slower parts of the code (I've tested using a 1.64 mb lorem ipsum) so here are my questions:
Is there a faster alternative for the wrap.innerHTML = html; that is adding 25 ms to the code?
I'm pretty sure that this can't be optimized while (wrap.firstChild) {frag.appendChild(wrap.firstChild);} but it adds 37 ms so suggestions are welcome.
Feel free to use this code the snippet is a working example of the code and shows how to use the it.
Edited to show latest changes, you may need to edit the excludes to be less restrictive.
var regexp = /lorem|amet/gi;
highlight (regexp,'<span style="Background-color:#33FF33">$&</span>');
function highlight (searchText, replacement) {
var excludes = 'html,head,style,title,link,script,noscript,object,iframe,canvas,applet';
var wrap = document.createElement('div');
var frag = document.createDocumentFragment();
var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
var nextnode=true;
while(nextnode){
if(searchText.test(walker.currentNode.nodeValue)
&& (excludes + ',').indexOf(walker.currentNode.parentNode.nodeName.toLowerCase() + ',') === -1
){
var html = walker.currentNode.data.replace(searchText, replacement);
wrap.innerHTML = html;
while (wrap.firstChild) {
frag.appendChild(wrap.firstChild);
}
var nodeToReplace=walker.currentNode;
nextnode=walker.nextNode();
nodeToReplace.parentNode.replaceChild(frag,nodeToReplace);
}else{
nextnode=walker.nextNode();
}
}
}
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer lorem adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer lorem adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
I have string in variable (Javascript/jQuery) containing content like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>
Pellentesque aliquet luctus lobortis.
<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>
massa iaculis leo, nec auctor
how i can wrap all unwrapped content in p tags?
So that string looks like:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>
<p>Pellentesque aliquet luctus lobortis.</p>
<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>
<p>massa iaculis leo, nec auctor</p>
Thank you!
Something like
var str = 'your string';
var div = $('<div />', {html: str});
div.contents().filter(function() {
return this.nodeType === 3;
}).wrap('<p />');
var new_str = div.html();
FIDDLE
Using a new jQuery object to parse the string as HTML, and then filtering out unwrapped textnodes, and wrapping them with paragraphs, and outputting the changed HTML as the new string.
Here's a jQuery-free way to do it using only string methods (no DOM required.)
var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>Pellentesque aliquet luctus lobortis.<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>massa iaculis leo, nec auctor",
unwrapped = text.split(/<p>\b[^>]*<\/p>/g), //regex to split on all p wrapped text
i;
for (i=0; i < unwrapped.length; i++) {
text = text.replace(unwrapped[i], '<p>' + unwrapped[i] + '</p>');
};
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>');
When the area in div 1 is clicked it is replaced with div 2 instantly. How do I add a 10 second delay between the transition?
<div id = "div1" style="display:block" onclick = "replace()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. </div>
<div id = "div2" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. </div>
<script type = "text/javascript">
function replace() {
document.getElementById("div1").style.display="none";
document.getElementById("div2").style.display="block";
}
</script>
You can use setTimeout function of javascript.
Change your replace function to:
function replace() {
document.getElementById("div1").style.display="none";
setTimeout( function(){
document.getElementById("div2").style.display="block";}, 10000);
}