This question already has answers here:
Trim string in JavaScript
(20 answers)
Closed 9 years ago.
In my website, I have title that is kind of like this:
<title>Current Title → Sub Title → My Site</title>
I want to display the Sub Title part of the title in some of my html elements... so I wrote this JavaScript code to print the title, but only the text in between the 1st and 2nd →
"<script>document.write(document.title.split("\u2192")[1]);</script>"
But that code outputs " Sub Title " with a space in front and behind it. Do you know how I can somehow delete the 2 spaces using javascript (without changing the title) to output something like this: "Sub Title"?
Thanks!
Try using JQuery trim over the one you have used already
http://api.jquery.com/jQuery.trim/
like this:
<script type="text/javascript">
var titlePart = document.title.split("\u2192")[1];
document.write($.trim(titlePart));
</script>
or if you want to stick to javascript, try using this...
<script type="text/javascript">
var titlePart = document.title.split("\u2192")[1];
document.write(titlePart.replace(/^\s+|\s+$/g, ''));
</script>
Related
This question already has answers here:
Creating multiline strings in JavaScript
(43 answers)
Closed 7 years ago.
I need to generate 185 lines of html on a web page when the user clicks on a button and I want to declare the html code as a multiple lines on a variable but I 've problems with the html code on a variable, I tried several ways researching on the web but I couldn't achieve it.
For example:
<script type="javascript">
//it doesn't work
var html = " <li> <!-- 185 lines of html --> </li>";
</script>
Using Heredoc (I thought heredoc notation doesn't work on Javascript -???-) notation seems that works but the javascript contained on the html shows an error.
I really appreciate any help.
You can do something like this:
document.getElementById('button').onclick = function(){
var eleContainer = document.getElementById('container'), //The parent of the of the elements
html = '', //Will be filled with html lines
repeats = 128; //You can change it as much as you want
for(var i=0; i<repeats; i++){
html += '<li></li>';
}
eleContainer.innerHTML = html;
}
This question already has answers here:
How do I select text nodes with jQuery?
(12 answers)
Closed 7 years ago.
Using Tampermonkey I want to reverse the text on the bbc news website (why? because), obviously this is locally only. I have already written something to replace a part of it, the problem is accessing all the text on the page. Is there an efficient way of doing this in JQuery?
e.g. I have a reverse() function, given:
<div>
Text1
<span class="...">Text2</a>
<fieldset>
<legend>Text3</legend>
Is there some way of targetting Text1, Text2 and Text3 without touching anything else? I can write something to explicitly check the tagName while traversing the DOM and hope there's a text type, or something similar, but I'm wondering if JQuery already has something for doing this?
thanks
Reverse away!
$('*').contents().filter(function() {
return this.nodeType === 3;
}).each(function() {
this.nodeValue = esrever.reverse(this.nodeValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/mathiasbynens/esrever/master/src/esrever.js"></script>
<div>
Text1
<span class="...">Text2</a>
<fieldset>
<legend>Text3</legend>
This question already has answers here:
How to add a list of images to the document from an array of URLs?
(2 answers)
Closed 7 years ago.
I've asked this question already but I haven't been able to get many answers. I'll try and be more clear with this one!
I have an array which I am randomizing using math.random. I am displaying this array in the browser, each time the page refreshes it randomizes and outputs a different array item. Each array item contains a title and description which works, but I am also trying to add an image. I want this image to be displayed in the browser.
JavaScript:
var myArray = [
{title: "my title", description: "my description", image: "file path"},
];
function getArray(ary){
return ary[Math.floor(Math.random()*ary.length)];
}
var random = getArray(action);
and then in my HTML I have a <script> tag to display each portion of the item to the browser,
document.write(random.title);
document.write(random.description);
document.write(random.image);
The problem is, the image doesn't show up it only displays the actual file path in text. How am I able to display the actual image?
You are to place the html for the image, this way:
document.write('<img src="'+random.image+'" width="203" height="350" />');
Otherwise your random.image only shows the output of the array, which is text with "file path" written in it.
If you want to create the images dinamically, a possible way is the following:
var x = document.createElement("IMG");
x.setAttribute("src", "file.jpg");
document.body.appendChild(x);
Make it valid HTML. Like <img src="path">
And this is some random text because the answer was too short.
This question already has answers here:
Wrap some specified words with span in jQuery?
(2 answers)
Closed 3 years ago.
I have an HTML article with some annotations on it, this annotation refers to some text inside the body. I want to wrap this text in a <span> tag so that I can modify it as I want.
I have a SPARQL Query that returns me some info and three important variables:
element --> the id of the container element of the text
start --> position of the first character of the annotation inside the element
end --> position of the last character of the annotation inside the element
Below there is an example that maybe will clarify.
With this element:
<p class="metadata-entry" id="element_id">
<span class="generated" id="span1">Publisher: </span>
BioMed Central
<span class="generated" id="span2"> (</span>
London
<span class="generated" id="span3">)</span>
</p>
Since I have an annotation on the word "London" when I run my query I obtain:
element = "element_id"
start = 27
end = 33
Now, after my ajax call that returns these 3 values, how can I wrap the word "London" in a span so I can set its background to a specific color?
This may be a bit dirty, but I think it should work. Since you have the element that contains "London", you can replace the HTML of that element with a modified version of what's currently in there.
You can see how to use the jquery html function here:
How to replace innerHTML of a div using jQuery?
Basically, what you'd do is use it as a getter to get the HTML out of the "element_id" element, modify it using Javascript string functions by adding span tags at the start and end indexes you have, and then using the html function to replace "element_id"'s HTML with the modified string.
I hope this works for you!
EDIT: To illustrate this better, here's essentially what you'd be doing:
var currentHTML = $(element).html();
var newHTML = currentHTML.substring(0, start) + "<span style='background-color: green;'>" + currentHTML.substring(start, end) + "</span>" + currentHTML.substring(end, currentHTML.length);
$("element_id").html(newHTML);
This question already has answers here:
JavaScript DOM remove element
(4 answers)
Remove element by id
(19 answers)
Closed 8 years ago.
I'm using this widget/snippet:
<div class="tbnet-gadget">
<div id="tbnet-g4">Carregando...</div><a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
<script async src="http://gadgetsparablog.com/ws/tabeladobrasileirao/script?funcao=g4&campeonato=serie-a" type="text/javascript"></script>
</div>
This widget forces a link on the bottom of it (Tabela do Brasileirão). If I change the href tag, the widget won't work.
I want to still use this widget, but I'm trying to remove that link from the bottom of it.
I managed to remove the href attribute using document.getElementById("tbnet-link").removeAttribute("href");, but the text "Tabela do Brasileirão" is still showing up.
This is how it looks like on JSFiddle: http://jsfiddle.net/3nhwf6tw/
How can I remove the whole <a id="tbnet-link"...Brasileirão</a> using javascript?
Thanks.
http://jsfiddle.net/3nhwf6tw/#&togetherjs=1DF8EF6xuh
How about just using CSS instead:
#tbnet-link{
display: none !important;
}
JSFiddle
Here is the non-CSS version (which is a bit ridiculous):
You can remove this:
<a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
If you add this jQuery and remove the script in your html:
$.getJSON("http://54.207.27.130/ws//tabeladobrasileirao/g4.jsonp?callback=?&campeonato=serie-a&time=None", function(k) {
$("#tbnet-g4").html(k.html.replace(/\<script.*?\<\/script\>/, ""));
});
JSFiddle no-CSS
To remove the element:
var el = document.getElementById("tbnet-link");
el.parentNode.removeChild(el);
To just clear the text:
var el = document.getElementById("tbnet-link");
el.innerHTML = ""
If you're up for jQuery, it's really easy:
$(function(){
$("#tbnet-link").remove();
});