How to use replace in div? - javascript

I have got one question, how to use javascript replace() in div tag? I tried it like that:
<html>
<body>
<div id="ahoj">ahoj</div>
<script type="text/javascript">
document.write(document.getElementById("ahoj").replace("ahoj","hola"));
</script>
</body>
</html>
...but it is not working.. Any ideas?

document.getElementById("ahoj") is an HTMLElement object. Use document.getElementById("ahoj").innerHTML
document.write(document.getElementById("ahoj").replace(/ahoj/g,"hola"));
Or if you don't want a new element:
document.getElementById("ahoj").innerHTML = document.getElementById("ahoj").innerHTML.replace(/ahoj/g,"hola");
Replace the string and set the innerHTML to the new string. Example

I think innerHTML is what you'll need to use.
document.write(document.getElementById("ahoj").innerHTML.replace("ahoj", "hola"));

<script type="text/javascript">
var el = document.getElementById("ahoj");
el.innerHTML = el.innerHTML.replace(/ahoj/g,”hola”);
</script>

Related

I'm trying to get the innerHTML of all <h2> tags and set that as their individual IDs but I'm not sure how to go about it

Basically I have a bunch of <h2> tags and without going into detail, I can't manually assign them IDs. So I THINK I could use .innerhtml to somehow get the <h2> text and assign that as IDs for them but I'm not sure how to get started.
Is this even possible?
The html would look something like this:
<body>
<h2>Science</h2>
<h2>History</h2>
<h2>Mathematics</h2>
<script>
</script>
</body>
As the comments have said, you should avoid using innerHTML unless you are sure you want the HTML content of the element - Using innerText instead will make sure you only receive the plaintext
You can use querySelectorAll to get all of the h2 elements in an HTMLCollection
You can then simply loop over this and update the property directly by using:
ele.id = ele.innerText;
Or you can make use of setAttribute like this:
ele.setAttribute('id', ele.innerText);
.
You might also want to use .toLowerCase() after the innerHTML, just to have a more standard ID styling
document.querySelectorAll('h2').forEach((ele) => {
ele.id = ele.innerText;
});
console.log(document.getElementById('History').innerText);
<body>
<h2>Science</h2>
<h2>History</h2>
<h2>Mathematics</h2>
<script>
</script>
</body>
You will want to use the DOM to find all the h2 elements and process accordingly:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Science</h2>
<h2>History</h2>
<h2>Mathematics</h2>
<script>
var h2s = document.querySelectorAll('h2');
h2s.forEach(function(h2Element) {
h2Element.id = h2Element.innerText;
});
</script>
</body>
</html>

JavaScript Replace function giving out errors

I want this code to replace all ':)'s with my smiley emoji. Although when I run the code I get Uncaught TypeError: Cannot read property 'replace' of undefined at ?v=0.02:10 any help would be greatly appreciated!
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>SVG Emoji</title>
</head>
<body>
<script>
var html = document.getElementsByTagName("html").innerHTML;
html.replace(":)", "<img src='https://csf30816.github.io/svg-emoji/emojis/smile.svg'>");
document.getElementsByTagName("html").innerHTML = html;
</script>
<h1>:) Test</h1>
</body>
</html>
Replace
document.getElementsByTagName("html").innerHTML
with
document.getElementsByTagName("html")[0].innerHTML
as getElementsByTagName returns an array.
Also, the string.replace() method returns a new string without mutating / modifying the given one. You would need to re-assign the returned string to html = html.replace(...).
Also, you need to move your <script> to the bottom. Otherwise it can't access DOM elements that appear beneath it in your HTML document, such as the <h1> element:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>SVG Emoji</title>
</head>
<body>
<h1>:) Test</h1>
<script>
var html = document.getElementsByTagName("html")[0].innerHTML;
html = html.replace(":)", "<img src='https://csf30816.github.io/svg-emoji/emojis/smile.svg'>");
document.getElementsByTagName("html")[0].innerHTML = html;
</script>
</body>
</html>
See also How to get the <html> tag HTML with JavaScript / jQuery?
For a more robust approach to replacing text within the DOM see jQuery replace all occurrences of a string in an html page
Your code and the problem you are trying to solve are doing different things. This will give you the solution you are seeking, i.e. replace all ':)'s with my smiley emoji
function replaceTextByImage(pattern, src) {
document.body.innerHTML = document.body.innerHTML.replace(
new RegExp(pattern, 'g'),
'<span style="background-size: 100% 100%; background-image: url(\'' + src + '\');">&nbsp&nbsp&nbsp&nbsp</span>'
);
}
replaceTextByImage(':\\)', 'https://csf30816.github.io/svg-emoji/emojis/smile.svg');
replaceTextByImage(':P', 'https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f61b.svg');
replaceTextByImage(':D', 'https://what.thedailywtf.com/plugins/nodebb-plugin-emoji-one/static/images/1f603.svg');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<p>
Hello World! How are you? :). Do you like this emoji :)
</p>
<div style="font-size:50px;">How about now :)</div>
<div style="font-size:25px">You can also do this :P and this :D now!</div>
</body>
</html>
PROS
Emoji will resize according to font used.
Replaces all occurrences of a pattern
CONS
If you have an inline script in the body of your html, it may be re-executed every time the function replaceTextByImage is called because it is setting the body's innerHTML.
If you want to use jquery then don't read this answer.
But for those who can allow their script not be jquery,
Here is your code.
document.getElementsByTagName("H1")[0].innerHTML = '<img src="https://csf30816.github.io/svg-emoji/emojis/smile.svg">';
<h1>:) Test</h1>
What the problem is:
You are returning an array.
Use one element with [0]:
document.getElementsByTagName("html")[0].innerHTML = html;

Why innerHTML properity cannot get the wanted value

In w3schools Javascript tutorial it states:
The value of the text node can be accessed by the node's innerHTML property, or the nodeValue.
Then I change the following code:
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
to
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].innerHTML;
document.write(txt);
</script>
</body>
</html>
But it didn't work, could anyone please let me know did I miss something here? Thanks.
document.getElementById("intro").childNodes[0] is a text node, but only element nodes have innerHTML.
You can use document.getElementById("intro").innerHTML instead (to get the innerHTML of the paragraph instead of of the text inside the paragraph).
Try
txt=document.getElementById("intro").innerHTML;
document.write(txt);
You can access innerHTML directly from the p element:
txt=document.getElementById("intro").innerHTML;
document.write(txt);
Also, try to find an alternative to W3Schools: http://www.w3fools.com/
Change
txt=document.getElementById("intro").childNodes[0].innerHTML;
To
txt=document.getElementById("intro").innerHTML;
http://jsfiddle.net/THMVC/
use only
txt=document.getElementById("intro").innerHTML;

.replace method in jquery

i want to replace class me to old when user clicks on a tag, i want to do that only with .replace function. My purpose to learn how replace method work. But the function which i have made not working.
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
$(this).attr('class').replace('me','old')
})
})
</script>
</head>
<body>
click
</body>
replace is not a jQuery function it is a function of string. You can read more about replace here. To use replace, you can read the attribute as a string, replace the contents of the string and then add the attribute back.
I don't think it is the best way to do this if you have jQuery loaded. You can use the jQuery utility designed to do these manipulations, like so:
$(this).toggleClass('me old');
This will turn on and off (toggle) both those class names. In effect it will switch from one to the other.
Docs:
http://api.jquery.com/toggleClass/
you are getting the class and it doesn't effect the class attribute, you can replace the string then set it to the element:
$('a').click(function(){
var cls = $(this).attr('class').replace('me','old')
$(this).removeClass('me').addClass(cls)
})
})
$('a').click(function(){
$(this).replaceWith('click');
});
I have created a bin with the solution on http://codebins.com/codes/home/4ldqpco
Try this instead:
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
var theclass = $(this).attr('class');
theclass = theclass.replace('me', 'old');
$(this).attr('class', theclass);
})
})
</script>
</head>
<body>
click
</body>
That should do the trick. JSFiddle Link

Javascript - Getting elements by name from an element?

When I try the following:
<html>
<body>
<script type="text/javascript">
window.onload = function() {
var test1 = document.getElementsByName("div1");
alert(test1[0]);
var test2 = test1[0].getElementsByName("div2");
alert(test2[0]);
}
</script>
<div name="div1">
<div name="div2">
</div>
</div>
</body>
</html>
It doesn't work the way I intend it to. I made a form and I need to be able to get the form data in a similar manner to what I was testing with this.
getElementsByName should only be called from a document element:
var test2 = document.getElementsByName('div2');
What's more, you really should only use the name attribute for form elements, not divs.
If you want an API that more-easily lets you do searches within a DOM element, consider using jQuery:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
var div1 = $('#div1');
var div2 = div1.find('#div2');
});
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
Of course, since ids must be unique document-wide, there's usually no reason to search within another element for a specific ID. Therefore, you don't really need anything fancy like jQuery for something that simple.
If I recall correctly, only the document (HTMLDocument) has the getElementsByName method. DOM Elements do not have that method and you cannot apply it by using them as the context.
There is no name in div's attributes. Why not use id instead?

Categories