I'm trying to remove a word from a paragraph using javascript. So far I've written this, but no luck with having it remove the word.
The word I'm trying to remove is S\n\nSubheadline space\n\n
jQuery(function($) {
document.body.innerHTML = document.body.innerHTML.replace( 'S\n\nSubheadline space\n\n', "");
});
<p><span class="excerpt_part"><strong>HANDRAIL</strong>S\n\nSubheadline space\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis…</span></p>
There are 2 problems:
You're not invoking the function properly (you aren't using jQuery anywhere either - I'd just remove that part entirely)
The innerHTML does not contain literal newlines, but backslash characters followed by n:
const spanText = document.querySelector('span').innerHTML;
console.log(spanText);
console.log(spanText.length);
<span>\n</span>
The behavior of \n is not the same in JS (where the backslash is an escape character) as it is in HTML markup (where the backslash is not an escape character).
So you need to match a literal backslash followed by an n, which requires writing out two backslashes in a JS string literal:
document.body.innerHTML = document.body.innerHTML.replace( 'S\\n\\nSubheadline space\\n\\n', "");
<p><span class="excerpt_part"><strong>HANDRAIL</strong>S\n\nSubheadline space\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis…</span></p>
You have to escape the newline chars with an extra backslash.
document.body.innerHTML = document.body.innerHTML.replace('S\\n\\nSubheadline space\\n\\n', "")
<p><span class="excerpt_part"><strong>HANDRAIL</strong>S\n\nSubheadline space\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis…</span></p>
Related
I am using the following code to dynamically add items to a page. I have each component as an object then I call each individual one with a For-in loop.
My question is, how can I convert my data to JSON, and then import it into my JS file to use?
const pageObjects = {
objectComponent1 : {
provideTitle: "Title",
provideId: "title",
provideDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Id aliquet risus feugiat in. Eget velit aliquet sagittis id consectetur purus. Non consectetur a erat nam at lectus urna duis. Convallis aenean et tortor at risus viverra adipiscing at. ",
provideHtml: `<p class="test">This is a pragraph element.</p>`,
},
objectComponent2: {
provideTitle: "Title",
provideId: "title",
provideDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Id aliquet risus feugiat in. Eget velit aliquet sagittis id consectetur purus. Non consectetur a erat nam at lectus urna duis. Convallis aenean et tortor at risus viverra adipiscing at.",
provideHtml: `<p class="test">This is a pragraph element.</p>`,
},
};
const docsContent = document.querySelector(".docs-content");
for (const singleObject in pageObjects) {
// add title
let objectTitle = document.createElement("h2");
objectTitle.setAttribute("id", pageObjects[singleObject].provideId);
objectTitle.innerHTML = pageObjects[singleObject].provideTitle;
docsContent.append(objectTitle);
// add description
let objectDesc = document.createElement("p");
objectDesc.innerHTML = pageObjects[singleObject].provideDesc;
docsContent.append(objectDesc);
// add example
let objectExample = document.createElement("div");
objectExample.classList.add("docs-example");
objectExample.innerHTML = pageObjects[singleObject].provideHtml;
docsContent.append(objectExample);
// add provide code
let objectCode = document.createElement("div");
objectCode.classList.add("docs-code");
docsContent.append(objectCode);
let pre = document.createElement("pre");
objectCode.append(pre);
let code = document.createElement("code");
code.innerHTML = pageObjects[singleObject].provideHtml;
pre.append(code);
};
say I have the following string in javascript:
const myStr = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntut labore et dolore magna aliqua. Vel facilisis volutpat est velit. Enim nunc faucibus a pellentesque sit."
but everytime I try to break it so it occupies two lines in atom so I can see it all, it is not one string anymore. How can I do it properly?
Depending on how it is used, you can use javascript template strings or just concatenate.
To use template strings, you simply wrap your text in backticks. This also gives the added benefit of allowing string interpolation with variables. The only downside is that it will preserve white space.
Eg:
const name = 'Jen';
const myLongStr = `Hello ${name}, This is a super long string that
needs to break between lines. It's not that big of an issue
depending on the use case.`
const strWithHtml = `<p>Hello <strong>${name}</strong>,</p>
<p>This is a paragraph, demostrating HTML usage.</p>`
The other option, as mentioned in other answers is simple string concatenation.
Eg:
const myLongStr = 'Lorem ipsum dolor sit amet, consectetur ' +
'adipiscing elit, sed do eiusmod tempor incididuntut ' +
'labore et dolore magna aliqua. Vel facilisis volutpat ' +
'est velit. Enim nunc faucibus a pellentesque sit.';
Depending on your use case, choosing one of these should work well.
Due to Javascript allowing you to break things onto multiple lines as long as a line doesn't end with a semicolon, this becomes quite easy.
const myStr = "Lorem ipsum dolor sit amet, consectetur "
+ "adipiscing elit, sed do eiusmod tempor incididuntut"
+ "labore et dolore magna aliqua. Vel facilisis volutpat"
+ "est velit. Enim nunc faucibus a pellentesque sit."
Mean something like this?
I have a tab control, and I am trying to get the index of the selected Tab, but I have a problem. I have some hidden tabs before the selected, and I am getting an Index like this:
Tab1 - Tab2(hidden) - Tab3(hidden) - Tab4
When I try to get the index of Tab4, I get 1, but I want to get a 3 (index from 0 to 3).
I am using ui.newTab.index() for this, and It ignore the hidden tabs.
Thanks and good coding!!
Edit. This is my code:
jQuery("#testTabs").tabs({ heightStyle: "fill", activate: function (event, ui) {
var index = ui.newTab.index();
}
});
It's in the event.
Are you using jQuery 1.10+ cause 1.8 and earlier (I think) uses select not activate?
Btw your code has no linked query, make a fiddle with linked jQ and add in HTML while you are at it?
I refactored someone's Fiddle to have a hidden element and it still works (open the console and see). So I don't think your problem is with hidden. Maybe display: none? Than tab is not even in DOM.
<div id="tabs">
<ul>
<li><span>One</span></li>
<li style="visibility: hidden;"><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
JS
$( "#tabs" ).tabs({
activate: function( event, ui ) {
console.log(ui.newTab.index());
}
});
this fiddle
How would I go about parsing the output returned from a function call, line by line, into an array where one line from output would be one array element?
I can naively do it via storing to a file and then reading the file back-in, but this seems to be unnecessary overhead and not a very elegant and tidy solution.
You probably want to split the data on carriage return. e.g.
var myArray = data.split('\n');
converts a file
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
to an array:
['Lorem ipsum dolor sit amet, consectetur adipiscing elit, ',
'sed do eiusmod tempor incididunt ut labore et dolore magna ',
'aliqua. Ut enim ad minim veniam, quis nostrud exercitation']
So, to parse the data on the fly you could do:
var myProcessedArray =
myFunction() // produces some multi-line data
.split('\n') // now we have array of strings
.map(function(line) {
// process lines
line = line.replace('ipsum', ''); // remove the word 'ipsum'
return line;
})
Hello I have below code for FAQ Toggle but the issue is when I click on any question it slides and show the answer perfectly but the all arrows in all question triggers.
<div class="faqbox" id="faq-list">
<div class="qblock">
<span class="arrow"></span>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
</div><!-- answer -->
</div><!-- qblock -->
<div class="qblock">
<span class="arrow"></span>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
</div><!-- answer -->
</div><!-- qblock -->
</div><!-- faqbox -->
This is the JS
function toggleFaqArrow(){
$('.qblock .arrow').toggleClass('rotate');
}
$(document).ready(function() {
$('.qblock h2').click(function(){
$(this).next('.answer').slideToggle(500);
$(this).toggleClass('close');
toggleFaqArrow();
});
});
Your toggleFaqArrow() function targets all arrow class elements inside all qblock class elements. You only want to toggle the rotate class of the sibling with class arrow of the h2 element clicked.
To achieve this, change your JS to:
$(document).ready(function() {
$('.qblock h2').click(function(){
$(this).next('.answer').slideToggle(500);
$(this).toggleClass('close');
$(this).siblings('.arrow').toggleClass('rotate');
});
});