I want to highlight a word in a page without involving the document.body.innerHTML as this totally alters the functionality of the page.
Is there any other way to do it?
Right now I am using this code to highlight
document.body.innerHTML= document.body.innerHTML.replace(/TEST/g, function(m){
return '<span style="background-color:YELLOW">'+m+'</span>'
}
Thank you
If I understand your problem correctly, I would suggest to retrieve the DOM elements with the relevant content, get the content, and finally surround it with a styled span element.
const $matchedElements = document.querySelectorAll("p");
$matchedElements.forEach(($element) => {
if ($element.innerHTML.match("SampleCollected")) {
const $mySpan = document.createElement("span");
$mySpan.style = "background-color:yellow";
$mySpan.innerHTML = $element.innerHTML;
$element.innerHTML = ""
$element.appendChild($mySpan)
}
});
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8" />
</head>
<body>
<p>
SampleCollected
</p>
<p>
SampleNotCollected
</p>
<p>
SampleCollected
</p>
<script src="src/index.js"></script>
</body>
</html>
Related
I'm trying to change the text in an h2 element with the simplest code but don't get what I'm doing wrong :
html
<h2 id="tries">Number of tries : 0</h2>
javascript
document.getElementById("tries").innerHTML = 'new text';
There is nothing wrong wiht that. You asked JS to replace the innerHTML, and JS done that.
If you want to change only the value after the ":" then here is an example where I placed a span into the the p and I change the innerHTML of this span.
function changeText(value) {
//this is the point
document.getElementById("tries-value").innerHTML = value;
}
const input = document.querySelector("input");
input.addEventListener("change", (e) => changeText(e.target.value));
changeText(input.value)
<h2 id="tries">Number of tries : <span id="tries-value">0</span></h2>
<label for="input-number">Change the input:</label>
<input id="input-number" value="10" type="number" />
I just guess you did that and as you can see, it will fail
<!doctype html>
<html>
<head>
<script>
document.getElementById("tries").innerHTML = 'new text';
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
You can first do DOM Operations if the DOM is actually loaded, so you just listen to the window.load event and it will work
<!doctype html>
<html>
<head>
<script>
window.addEventListener('load', function () {
document.getElementById("tries").innerHTML = 'new text';
});
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
Why I am asking this: There are many questions similar to this one, but none of them are having a satisfactory answer.
Question:
It seems like, using Regular expression in a content editable HTML element for replacing specified string badly disturbs user's experience with caret positioning
What happens after using Ragex:
1:'Enter key'(earlier which was able to add line break) will stop working.
2:During any manual edit, caret assumes initial position (which is beginning of the editable HTML element).
So far the answers that I was able to find, have bugs!
My snippet with contenteditable="true" HTML element
```
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<meta name="viewport" width="device width, initial-scale=1.0">
<style>
#spanone{
color:red;
}
#spantwo{
color:yellow;
}
</style>
</head>
<body style="background:royalblue;">
<p id="inp" contenteditable="true" style="height:90vh; width:90vw; background:black; color:white; font-weight:bold;">
{This} [is] {HTML} [rendered], {replaced string} [using ragex]! edit me!
</p>
<script>
$(function(){
$("#inp").on("input" , function(){
var str = $("#inp").text();
var new_str = str.replace(/(\[(?:[\w\s]*)*\])/g, function(match){
return match.replace(/(\w+)/g, '<span id="spanone">$1</span>');
});
var result = new_str.replace(/(\{(?:[\w\s]*)*\})/g, function(match){
return match.replace(/(\w+)/g, '<span id="spantwo">$1</span>');
});
$("#inp").html(result);
});
});
</script>
</body>
</html>
So, using just javascript, I want to put all the text on a page into a string. There's probably some really easy way to do it, but I have no idea how.
You can get the innerText of the body:
document.body.innerText
<!DOCTYPE html>
<html lang="en">
<head>
<title>Put Text on Me</title>
<script>
var sampleText = "Hi I am a text";
function writeTextOnPage(){
document.getElementById('putText').innerText = sampleText;
}
</script>
</head>
<body>
<p id='putText'></p>
<input type="button" onclick="writeTextOnPage()" value="Load Here">
</body>
</html>
I am learning to create an element dynamically in an html page using javascript. In this code I am trying to create a simple "h6" inside "div-1".
<!DOCTYPE html>
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1"></div>
<script>
function constructElement(){
var elem = document.createElement("h6");
elem.innerText("Dynamically added text.")
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
</html>
there are two mistakes in your code
the first is that you used wrong "id" name div-1 instead of div1
also, innerText isn't a function
this is the code after the fix :)
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1">
</div>
<script>
function constructElement() {
var elem = document.createElement("h6");
elem.innerText = "Dynamically added text."
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1">
</div>
<script>
function constructElement(){
var elem = document.createElement("h6");
elem.innerText= "Dynamically added text.";
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
Set the text content of a node: node.innerText = text
function constructElement(){
var elem = document.createElement("h6");
elem.innerText ="Dynamically added text."
document.getElementById("div-1").appendChild(elem);
}
This is directly not your answer but the algorithm is very similar
https://stackoverflow.com/a/56489422/10941112
(For the part of modals please put your own elements)
In case you need further clarification feel free to ask as this is not your direct answer
Also sorry to say but the question is a duplicate of -
Dynamically creating HTML elements using Javascript?
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(mypara)
{
mypara.innerHTML="Ooops!";
}
</script>
</head>
<body>
<script>var mypara = document.getElementById("para1");</script>
<h1 onclick="changetext(mypara)">Click this text to change the content of following paragraph</h1>
<p id="para1"> this is a paragraph I would like to change </p>
</body>
</html>
I would like to let user to click the heading to change the content of the paragraph, but I don't know the correct way of coding that. How to send the "mypara" parameter to myFunction() in HTML?
Your example almost works - the problem is when you execute this line:
var mypara = document.getElementById("para1");
The element you're refering to does not yet exist. You could fix it by just going inline:
<h1 onclick="changetext(document.getElementById('para1'))">...</h1>
Live example for this approach: http://jsfiddle.net/Gw5CG/2/
or perhaps just pass the id to the method:
<h1 onclick="changetext('para1')">...</h1>
and change the method to do the getElementById:
function changetext(mypara)
{
document.getElementById(mypara).innerHTML="Ooops!";
}
Live example for this approach: http://jsfiddle.net/Gw5CG/1/
The element doesn't exist yet when you're trying to get it.
Why not just get it in the event handler
<!DOCTYPE html>
<html>
<head>
<script>
function changetext() {
document.getElementById("para1").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext()">Click this text to change the content of following paragraph</h1>
<p id="para1">this is a paragraph I would like to change</p>
</body>
</html>