This question already has answers here:
RegEx match open tags except XHTML self-contained tags
(35 answers)
Closed 7 years ago.
I googled my fingers wound and all the solutions I found won't work.
Im trying to replace a div like the following:
var modal = document.getElementById("first");
// Get modal content and replace the footer with content
var oldContent = modal.innerHTML;
// Set modal content
modal.innerHTML = oldContent.replace(/<div class="two">(.*?)<\/div>/, '<div class="two">' + 'Content' + '</div>');
<div class="outer" id="first">
<div class="one">This is the first one</div>
<div class="two">Second one</div>
</div>
Im trying to replace everything in the second div.
Currently my code is like this and I tried so select everything with regex, but it just wont work.
You could be using querySelector for what you need:
document.querySelector('div.two').innerHTML = 'Content';
Makes no sense to change content with a regular expression when you can access the element. Explained here on why it is bad idea.
Just reference the element from the modal and set the innerHTML or textContent with the value you want.
modal.getElementsByClassName("two")[0].innerHTML = "new text";
or
modal.querySelector(".two").innerHTML = "new text";
Related
This question already has answers here:
How to get value of a div using javascript
(7 answers)
Closed 3 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I had this problem when I get the value from a div:
function sync(){
var n1 = document.getElementById('editor').value;
alert(n1);
var n2 = document.getElementById('news');
n2.value = n1;
}
div with id editor looks like this:
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
When I put something in that div it will alert me undefined and that will also come in the textarea i paste it in too. So the problem is obviously by this:
var n1 = document.getElementById('editor').value;
What am I doing wrong?
Try this
var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent
I think it's important to note that even if <div> was a HTMLInputElement you would still keep getting undefined because your div,
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
Has no value attribute, here is an example of a div with a value attribute:
<div class='message' id='editor' value='hello'></div>
However, as mentioned in other answers, even though you have entered a value it, .value will still return undefined because <div> is a HTML element and not a HTMLInputElement.
If you really need to store some information in the value of the div you can always do something like this:
<div id="mydiv"></div>
<script>document.getElementById('mydiv').value='hello';</script>
Right after the div loads, you force 'hello' as the value.
The only reason you'd do this is if you really want to store data within the div's value and can't store it within the innerHTML because the div is visible.
If you want to store the information within your div like this:
<div id="editor">all the information i want to store</div>
Then document.getElementById('editor').innerHTML; is the correct solution, but remember that users will be able to see the information on the webpage.
HTML Elements and HTMLInputElements are different things.
The value attribute is present in HTMLInputElement in HTMLInputElement Reference
div elements are HTMLElement
If you change your div to input your Javascript will work fine.
The option is to use innerHTML as said in another answer but be aware that this could be HTML fragment at times if you don't control the HTML or over time forget the Javascript and can lead to defects as things.
FYI plain elements attribute reference(there is no value)
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 7 years ago.
I am trying to replace some text in a DIV tag using JavaScript, but the tag only has a class not an ID. I have tried:
document.getElementByClassName('theClassName').innerHTML = 'text i want to insert in place of the existing text';
This has not worked, I also tried the above but using getElementById but that didn't work either.
UPDATE:
I think I need to explain more (sorry im a n00b coder). What I am doing is loading a website into a WKWebView using Swift, I am then injecting a .JS file at the end of the page loaded. Within that .JS file I am then trying to do the above with no success. I can find a DIV and hide it so far but being able to replace the text is proving hard.
Here is what I tried last but this did not work either:
var classes = document.getElementsByClassName("title-random");
for(var i=0;i<classes.length; i++) {
if(classes[i].innerHTML == "The old text") {
classes[i].innerHTML = "the new text";
break;
}
}
I have even tried generic "find this text" and replace it code but with no effect
Hi if u have the class on several divs u have to access via array like this:
<!DOCTYPE html>
<html>
<body>
<div class="example">First div element with class="example".</div>
<div class="example">Second div element with class="example".</div>
<p>Click the button to change the text of the first div element with class="example" (index 0).</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
x[0].innerHTML = "Hello World!";
}
</script>
</body>
</html>
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:
How to get value of a div using javascript
(7 answers)
Closed 3 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I had this problem when I get the value from a div:
function sync(){
var n1 = document.getElementById('editor').value;
alert(n1);
var n2 = document.getElementById('news');
n2.value = n1;
}
div with id editor looks like this:
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
When I put something in that div it will alert me undefined and that will also come in the textarea i paste it in too. So the problem is obviously by this:
var n1 = document.getElementById('editor').value;
What am I doing wrong?
Try this
var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent
I think it's important to note that even if <div> was a HTMLInputElement you would still keep getting undefined because your div,
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
Has no value attribute, here is an example of a div with a value attribute:
<div class='message' id='editor' value='hello'></div>
However, as mentioned in other answers, even though you have entered a value it, .value will still return undefined because <div> is a HTML element and not a HTMLInputElement.
If you really need to store some information in the value of the div you can always do something like this:
<div id="mydiv"></div>
<script>document.getElementById('mydiv').value='hello';</script>
Right after the div loads, you force 'hello' as the value.
The only reason you'd do this is if you really want to store data within the div's value and can't store it within the innerHTML because the div is visible.
If you want to store the information within your div like this:
<div id="editor">all the information i want to store</div>
Then document.getElementById('editor').innerHTML; is the correct solution, but remember that users will be able to see the information on the webpage.
HTML Elements and HTMLInputElements are different things.
The value attribute is present in HTMLInputElement in HTMLInputElement Reference
div elements are HTMLElement
If you change your div to input your Javascript will work fine.
The option is to use innerHTML as said in another answer but be aware that this could be HTML fragment at times if you don't control the HTML or over time forget the Javascript and can lead to defects as things.
FYI plain elements attribute reference(there is no value)
This question already has answers here:
Change content of a div using JavaScript
(4 answers)
Closed 9 years ago.
document.getElementById("txtOutput").value = result;
instead of using .value=result, can I write something else to say, rewrite to a specific div or paragraph?
If you want to write something (including html-formatations) you can use innerHTML orherwise if you need only the text use innerText:
innerHTML
document.getElementById("txtOutput").innerHTML = result
innerText
document.getElementById("txtOutput").innerText = result;
Yes you can. Look at this simple JsFiddle for an example.
HTML:
<div id="me">
<span>old stuff</span>
</div>
Script
document.getElementById('me').innerHTML = "new stuff";
you can use innerHTML:
document.getElementById("txtOutput").innerHTML = 'some content';