I have this html code:
<p>Hello, this is a test replacing, <span class="myclass">over test</span> and <span class="myclass">over test</span>.</p>
My javascript works to replace the word "Hello" with "FuuBar".
document.body.innerHTML = document.body.innerHTML.replace(/Hello/g, "FuuBar");
But I can not replace <span class="myclass">over test</span> by <span class="thanks"><b>Thanks God</b></span>
I am starting in javascript. I need to resolve this in pure js. Could help in my code? And sorry for the English.
JsFiddle for help.
Use the DOM for this. Check here for more info: https://developer.mozilla.org/en-US/docs/DOM
var spans = document.querySelectorAll('.myclass');
for (var i=0; i<spans.length; i++) {
spans[i].classList.remove('myclass');
spans[i].classList.add('thanks');
spans[i].innerHTML = '<b>Thanks god</b>';
}
Have you checked quotations? You should escape them in the classname in JS or use single quotes. Please provide the code if that's not the case.
Other than that, replacing the whole body doesn't seem the best idea for a task like this.
Related
I have the following:
<span class="hello" id="something somemore"> blah blah blah </span>
My regex is not my strongest ability, would appreciate is someone could help me in javascript regex.
I would like to remove everything/anything and including from <span to > and then finally just remove the </span>.
I am using .replace(myregexhere, ""); to replace other items but I am struggling to do the above.
Also if there are easier or better alternatives let me know.
If you really want to use regex replace, try this:
var newstring = oldstring.replace(/<span[^>]*>([^<]*)<\/span>/, "$1");
Note that this doesn't work if any html tags are in between <span> and </span>. If you have html tags there then please use something like this instead.
You want something like:
~<span.+?>~
and
~</span>~
Why not use replaceWith() instead :
var something = $('#something').text();
$('#something').replaceWith(something);
use jQuery:
$('span').remove();
or for each span with class "hello":
$('span .hello').remove();
or for each element with id "something somemore",
$("#something somemore").remove();
I want to sub string and remove the , which appears within the span tag and display the name alone. Below are the two cases which needs to work.
Case1: <span class="datatableheader">No results found, </span>
Case2: <span class="datatableheader">Jude Gomes, </span>
A single function should help in removing the , in both cases and display the result as
<span class="datatableheader">No results found </span>
<span class="datatableheader">Jude Gomes </span>
Appreciate for any help.
Thanks
$(".datatableheader").html ($(".datatableheader").html().replace(",",""));
It's not widely recognized that .html accepts a callback function:
$('.datatableheader').html(function(i,old) {
return old.replace(/, ?/g, '');
});
http://jsfiddle.net/3fBY4/1/
you can try this also
var parts = id.split(':'); //because u have case1: or case2:
// it will split into string in array//
$('#parts[1]').replace(",",""));
//try to print that it will work
nice question.
How can I "clean away" all but the word dog from the html code below using Javascript
and perhaps regex? The id will vary.
<div class="tag" id="11">dog</div>
although its very bad idea to parse html via js , but if you want then try this
<.*>(.*)<\/.*>
DEMO
ids should not begin with a digit.
<div class="tag" id="d11">dog</div>
var who= document.getElementById('d11');
alert(who.textContent || who.innerText || '');
If it's always going to be class=tag, then a bit of jquery can help with this:
$('.tag').html()
If it's in a string already
var s = '<div class="tag" id="11">dog</div>';
$(s,'.tag').html()
I am trying to replace a text in javascript using a regular expression like following [example of what I am trying to do]:
<html><head></head>
<body>
<div id="div1">This is Old</div>
<script>
var message = "Hi";
var str = document.getElementById("div1").innerHTML;
var newstr = str.replace(/Old/g, "<div onclick='say(\""+message+"\");'>New</div>");
document.getElementById("div1").innerHTML = newstr;
function say(message)
{
alert(message);
}
</script>
</body>
</html>
This is a sample code of what I am trying to do in a large application. Our script is injected in thrid party html pages, so we dont have control over the html.
If you run this code, you will see that the text appears to be broken and if you just remove the "Old" from the title tag it will work fine. I cannot change the html, so I have to modify the script to handle this.
Is there a way I can put some regular express that can bypass the replacement of the text in case if it occurs in between "<" and ">"?
or some other way to solve this.
I cannot use DOM to do the replacement, as it crashed the page when there were too much text, I am doing full page text replacement.
Thanks in advance for your help :)
EDIT: Changed the code to make it working :)
I might be unrelated but, you may need to replace message variable inside the replaced text. Since you declared message variable locally, it will not be available outside.
EDIT:
For your question, you can do that with RegEx but it will be quite hard. If I got time I might work on it a bit.
EDIT 2:
Try this one, it makes sure the Old is not in a tag.
>[^><]*(Old)[^<>]*<
EDIT 3:
This works file too, starting > is not necassary
[^><]*(Old)[^<>]*<
EDIT 4:
<html><head></head>
<body>
<div id="div1">This is Old</div>
<script>
var message = "Hi";
var str = document.getElementById("div1").innerHTML;
var newstr = str.replace(/([^><]*)Old([^<>]*<)/g, "$1<div onclick='say(\""+message+"\");'>New</div>$2");
document.getElementById("div1").innerHTML = newstr;
function say(message)
{
alert(message);
}
</script>
</body>
</html>
Make your replace:
str.replace(/(>[^<]*)Old/g, "$1<div onclick='say(\"message\");'>New</div>");
Which basically means "Old not in an HTML tag"
Wouldn't it be simpler to assign id to <a> element instead and then run the same replace() on it's innerHTML (which shouldn't contain the tag's title attribute):
<html><head></head>
<body>
<div id="div1"><a id="link" href="#" title="This is Old">This is Old</a></div>
<script>
var message = "Hi";
var str = document.getElementById("link").innerHTML;
var newstr = str.replace(/Old/g, "<div onclick='say(\"message\");'>New</div>");
document.getElementById("link").innerHTML = newstr;
function say(message)
{
alert(message);
}
</script>
</body>
</html>
I have a JavaScript string containing HTML like this:
<div>
<div class="a">
content1
</div>
content 2
<div class="a">
<b>content 3</b>
</div>
</div>
and I want to remove the div's of class="a" but leave their content.
In Python I would use something like:
re.compile('<div class="a">(.*?)</div>', re.DOTALL).sub(r'\1', html)
What is the equivalent using Javascript regular expressions?
Why don't you use proper DOM methods? With a little help from jQuery, that's dead simple:
var contents = $('<div><div class="a">content1</div>content 2<div class="a"><b>content 3</b></div></div>');
contents.find('.a').each(function() {
$(this).replaceWith($(this).html());
});
You can achieve it with regular expressions in JavaScript
var html = '<div> <div class="a"> content1 </div> <div class="a"> content1 </div> ... </div>';
var result = html.replace(/<div class="a">(.*?)<\/div>/g, function(a,s){return s;});
alert(result);
RegExp method replace takes two parameters - first one is the actual re and the second one is the replacement. Since there is not one but unknown number of replacements then a function can be used.
If you want to do this in Javascript, I'm presuming that you are running it in a web browser, and that the 'javascript string' that you refer to was extracted from the DOM in some way.
If both of these case are true, then I'd say that it would be a good idea to use a tried and tested javascript library, such as JQuery (There are others out there, but I don't use them, so can't really comment)
JQuery allows you to do on-the-fly DOM manipulations like you describe, with relative ease...
$('div.a').each(function(){$(this).replaceWith($(this).html());});
JQuery is definitely one of those tools that pays dividends - a failry short learning curve and a whole lot of power.