Add class only to numbers in HTML page except on links - javascript

I've tried this script inside Joomla to add a class to every number so that I can format them with CSS:
<script>
(function($) {
$(function() {
$('h1,h2,h3,h4,h5,h6,p,strong,i,em,b,span,sup,sub').each(function() {
var el = $(this),
html = el.html();
html = html.replace(/(\d)/gi, "<span class='number'>$1</span>");
el.html(html);
});
});
})(jQuery);
</script>
It work fine but I've got a problem with links where there are numbers such as:
www.miosito.it/index.php&articleid=2
In this case it make this:
www.miosito.it/index.php&articleid=<span class="number">2</span>
So the link is broken. How could I edit the script to fix it?

Related

What Is The Best Way Of Writing Element in On Clicked blank page Created By JavaScript?

My Code:
$('.classname').on ("click" ,function() {
var newpage = "Html Elements for blank page";
var mywindows = window.open("","_blank","");
mywindows.document.open() ;
mywindows.document(newpage);
mywindows.document.close() ;
});
<button class="classname">Click here</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I want to make it short By Using:
$('html').html('my html elements');
but I can't success to use this, It Always shows result in the current page, and opens a blank page, and I don't have any idea to fix it!
Here is the code:
$('.classname').on ("click" ,function() {
var newpage = window.open('','_blank','');
newpage.$('html').html('my html elements are here');
});
Document is not a function to use parameters in it.
Else you can not use open and close function with document.

How to change html changes inside a html file?

I was creating a button which will increase number on button click.
Like this:
<button>Create</button>
<p id="p"></p>
<script>
var i = 0
$('button').click(function() {
$('p').html(i);
i++;
});
</script>
It worked perfectly.
Then i added localstorage to it.
The code is like this:
<button>Create</button>
<p></p>
<script>
var i = 0
$('button').click(function() {
$('p').html(i);
i++;
});
$(function() {
var = document.getElementById('p');
$("button").click(function() {
localStorage.setItem("comment4", $("p").html());
});
if (localStorage.getItem("comment4")) {
.innerHTML = localStorage.getItem("comment4");
}
});
</script>
And it also worked perfectly.
Here is a demo Fiddle
My doubt is that, How can i change the var i = 0 to the next number?
So that if I open it with notepad(or something else) I have to see the var i = the next number
If i understood your question correctly this must suffice
var i = localStorage.getItem("comment4") || 0;
Although its impossible to change the contents of a file without a server side language

JS Change hrefs to onclicks in HTML encoded entities

I'm looping through a database that have strings that contain HTML entities:
"<!-- SC_OFF --><div class=\"md\"><p>Here is an example link</p>\n\n<p>Here is some body text for you with <sup>superscript</sup> and a bit of <strong>boldness</strong> and some <em>italics</em>. I forgot to mention this regular link here http://example.com</a> so don't forget that one. sometimes there can be more than one <a href=\"http://example.com\">formatted link and http://example.com</p>\n\n<ul>\n<li>so there you go</li>\n<li>some sample text to work with</li>\n</ul>\n\n<p><del>strikethrough</del></p>\n\n<pre><code>if(canCode){\n //lol dont kid yourself\n}\n</code></pre>\n</div><!-- SC_ON -->"
that would be dynamically inserted into the DOM. I need to alter what the links do so basically all of these:
example
becomes:
<a onClick="myFunc('http://example.com')">example</a>
You can find the decoded string here:
http://codepen.io/YikesItsMikes/pen/NxaJXg
but I figure editing the original text might be easier? I have no idea honestly :s
After adding the html elements to DOM. Following code work (untested),
var $aTags = $('div.md').find('a');
$aTags.each(function() {
var $aTag = $(this),
href = $aTag.attr('href');
$aTag.on('click',function(e) {
myfunc(href);
e.preventDefault();
});
});
Updated code in your example (Tested)
var test = decodeHtml("<!-- SC_OFF --><div class=\"md\"><p>Here is an <a href=\"http://example.com\">example link</a></p>\n\n<p>Here is some body text for you with <sup>superscript</sup> and a bit of <strong>boldness</strong> and some <em>italics</em>. I forgot to mention this regular link here <a href=\"http://example.com\">http://example.com</a> so don&#39;t forget that one. sometimes there can be more than one <a href=\"http://example.com\">formatted link</a> and <a href=\"http://example.com\">http://example.com</a></p>\n\n<ul>\n<li>so there you go</li>\n<li>some sample text to work with</li>\n</ul>\n\n<p><del>strikethrough</del></p>\n\n<pre><code>if(canCode){\n //lol dont kid yourself\n}\n</code></pre>\n</div><!-- SC_ON -->")
$(document.body).append(test);
var $aTags = $('div.md').find('a');
$aTags.each(function() {
var $aTag = $(this),
href = $aTag.attr('href');
$aTag.on('click',function(e) {
myfunc(href);
e.preventDefault();
});
});
function myfunc(href) {
alert(href);
}
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
Before inserting, you could run this replace:-
html = html.replace(/href=\"([^\"]+)\"/gi, 'onClick="myFunc(\'$1\')"')
using a group capture and $1
The group ( ... ) in the regex captures the value as 1 as 0 is always the full capture, in your case href="http://example.com"
In the second param then, you can use $0 for the full, or $1 for your capture group.
$('a').each(function () {
var href = $(this).prop('href');
$(this).click(function (e) {
e.preventDefault();
myFunc(href);
});
$(this).removeProp('href');
});
function myFunction(link) {
console.log(link)
}
var html = "<!-- SC_OFF --><div class=\"md\"><p>Here is an example link</p>\n\n<p>Here is some body text for you with <sup>superscript</sup> and a bit of <strong>boldness</strong> and some <em>italics</em>. I forgot to mention this regular link here http://example.com</a> so don't forget that one. sometimes there can be more than one <a href=\"http://example.com\">formatted link and http://example.com</p>\n\n<ul>\n<li>so there you go</li>\n<li>some sample text to work with</li>\n</ul>\n\n<p><del>strikethrough</del></p>\n\n<pre><code>if(canCode){\n //lol dont kid yourself\n}\n</code></pre>\n</div><!-- SC_ON -->";
$(html).filter(":not(comment)")
.find("a").each(function() {
var link = this.href;
$(this)
.attr({"href": "#", "onclick":"myFunction('"+link+"')"})
}).addBack().appendTo("body")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
$(document).ready(function () {
var szData="<div class=\"md\"><p>Here is an example</p>\n\n<p>Here is some body text for you with <sup>superscript</sup> and a bit of <strong>boldness</strong> and some <em>italics</em>. I forgot to mention this regular link here http://example.com</a> so don't forget that one. sometimes there can be more than one <a href=\"http://example.com\">formatted link and http://example.com</p>\n\n<ul>\n<li>so there you go</li>\n<li>some sample text to work with</li>\n</ul>\n\n<p><del>strikethrough</del></p>\n\n<pre><code>if(canCode){\n //lol dont kid yourself\n}\n</code></pre>\n</div>"
$('.content').html(szData);
$('.content').find('a').each(function () {
$(this).on('click', function (e) {
myfunc($(this).attr('href'));
e.preventDefault();
});
$(this).removeAttr('href');
});
function myfunc(szhref)
{
alert('myfunc')
}
});

Load content from Div with Div Id

I have some code working but want to make an adaptation but can't get it to work. I have the following:
<script type="text/javascript">
// <![CDATA[
var textBlocks = new Array('Apple', 'Banana', 'Orange');
function changeText(elemid) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("display").innerHTML=textBlocks[ind];
}
// ]]>
</script>
But only want to change 'Apple', 'Banana', 'Orange' into something to load the content from a specific DIV's with DIV ID's: content A, content B and content C.
Thanks, Eddy
Assuming I understood what you need try this:
var textDivsId = new Array('contentA', 'contentB', 'contentC');
function changeText(elemid) {
var ind = document.getElementById(elemid).value;
document.getElementById("display").innerHTML = document.getElementById(ind).innerHTML;
}
where contentA, contentB and contentC are ID's of DIVs you want to load. Here is some working example on JSFiddle.
This is not an elegant solution, have you considered using visibility=visible property and CSS class swapping dynamically?
I'm not entirely sure what you mean by
into something to load the content from a specific DIV's with DIV ID's: content A, content B and content C
but if you mean you have 3 divs:
<div id='A'>Apple</div>
<div id='B'>Banana</div>
<div id='C'>Orange</div>
then you can create an array within javascript of their contents with:
var textBlocks = [document.getElementById('A').innerHTML, document.getElementById('B').innerHTML, document.getElementById('C').innerHTML];
however, this will only work if it runs in this order (i.e. your divs have to be inserted into your document before you run this javascript to build textBlocks. For this reason you might want to consider using jQuery to detect when your HTML elements are ready:
<script src='https://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<script type="text/javascript">
// <![CDATA[
var textBlocks = [];
function changeText(elemid) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("display").innerHTML=textBlocks[ind];
}
$(document).ready(function() {
textBlocks = [document.getElementById('A').innerHTML, document.getElementById('B').innerHTML, document.getElementById('C').innerHTML];
// ... do your other stuff here, like call changeText(..)
});
// ]]>
</script>
<div id='A'>Apple</div>
<div id='B'>Banana</div>
<div id='C'>Orange</div>

Replace a URL if its found in the document Javascript

Hi i Usually use this code to replace a text in a page
$(window).load(function() {
var html = document.body.innerHTML;
html = html.replace( /Any Text/g, '???' );
document.body.innerHTML = html;
});
The problem i have is i cant isert a url instead of "Any Text"... my question is how do you do this:
$(window).load(function() {
var html = document.body.innerHTML;
html = html.replace( /http://subd.url.com/index.php?page=category/items/392/???/all/-1/-1/%20/%20/%20//g, 'http://www.newurl.com/foro/' );
document.body.innerHTML = html;
});
Thanks,
Also i know its better to use an Id like this..
$(window).load(function() {
$("#stID").attr("href", "http://www.newurl.com/foro/");
});
But this time i have to look in the entire body thanks.
jquery is running so if anyone know how to do it with jquery yes im open to jquery. thanks
Escape special chars with a \ like so..
html = html.replace( /http\:\/\/subd.url.com\/index.php?page=category\/items\/392\/???\/all\/-1\/-1\/%20\/%20\/%20\//g, 'http://www.newurl.com/foro/' );
This should replace all links on a page to the same destination link..
[].map.call(document.getElementsByTagName('a'), function(a){a.href = 'http://mysite.com'})
Well, I don't think you're being very clear about what you're trying to find and replace, but at face value, it looks like you are wanting to replace an exact url with another url, so you can do this (jQuery):
$(document).ready(function() {
$('a').each(function() {
var href = $(this).attr('href');
if (href=="http://subd.url.com/index.php?page=category/items/392/???/all/-1/-1/%20/%20/%20/")
$(this).attr("href","http://www.newurl.com/foro/");
});
});

Categories

Resources