Sorry, this may be kind of weird problem:
I have an existing HTML code, which I can not directly edit or delete parts of it. The problem is: Inside a div-element in this code, there is some text which I want to hide. There are also another element inside of this div, which I don't want to hide. It looks something like this:
<div>
....Text I want to hide....
<table> ... Text I don't want to hide...</table>
</div>
My question: Is it possible to hide the "....Text I want to hide...." while not hiding the "... Text I don't want to hide..."? (for example using javascript?)
var txt = div.childNodes[0];
var range = document.createRange();
range.selectNode(txt);
var span = document.createElement("span")
range.surroundContents(span);
span.style.display = "none";
See it here: http://jsfiddle.net/KZVDf/
If you want to remove the text, you can write:
div.removeChild(div.firstChild);
(where div is a variable referring to this <div> element).
If you want to wrap it in a <span> that you can then hide and unhide at will, you can write:
var span = document.createElement('span');
div.insertBefore(span, div.firstChild);
span.appendChild(div.firstChild);
(where div is as before).
Surround text which you want to hide with span and set to that span display:none. Example:
<div>
<span style="display:none">....Text I want to hide....</span>
<table> ... Text I don't want to hide...</table>
</div>
Or make it with hidden with script:
$('div span').show(); // Show hidden text in span
$('div span').hide(); // Hide text in span
Related
This question already has an answer here:
How to get the selected element inside a contenteditable element
(1 answer)
Closed 10 months ago.
I have a sample at Finding currently focused span in an editable div.
The editable div i.e. a div having the attribute contenteditable="true", contains 3 different spans with each span wrapped in a div. A user could position the cursor in any one of the three spans. My goal is to find out which span is being edited when user clicks on a span content to start editing or types into it. I would like this to work on desktop or mobile devices.
I tried getting the span using document.activeElement as you can see in my code sample, but it gets the editable div and not the current span. I was looking for a JavaScript solution to this problem.
Question:
How would I get the id of span element whose text is being edited using JavaScript?
Html code
<div id="input" contenteditable="true" onfocus="findCurrentSpan(this)">
<div>
<span id="first">first span</span>
</div>
<div>
<span id="second">second span</span>
</div>
<div>
<span id="third">third span</span>
</div>
</div>
<p id="info" style="color:green">
</p>
Javascript code
function findCurrentSpan(editor) {
var element = document.getElementById("input");
var currentSpan = document.activeElement;
document.getElementById("info").innerHTML = "Active element's id is " + currentSpan.id;
}
The Problem is, that you are going to select the active element from the whole Page, that's why it is called document.activElement.
Have a look a this SO Question Get and set cursor position with contenteditable div
In your example findCurrentSpan(this) this is referring to the function findCurrentSpan() so this.id will have the value input.
<div id="input" contenteditable="true" onfocus="findCurrentSpan(this)">
To solve your problem, I recommend you bind an onfocus event to all of input's children (explanation on how the onfocus event works in javascript).
This is how you select all the span elements inside input:
var children = document.getElementById("input").querySelectorAll('span');
After selecting the elements you want to bind an event to. Use a loop to bind an event to all the elements. As far as I know span doesn't implement a focus state so we will have to use click.
children.forEach(function(e) {
document.getElementById(e.id).addEventListener("click", findCurrentSpan)
})
The code will look like this:
function findCurrentSpan() {
console.log(this.id)
document.getElementById("info").innerHTML = "Active element's id is " + this.id;
}
var children = document.getElementById("input").querySelectorAll('span');
children.forEach(function(e){
document.getElementById(e.id).addEventListener("click", findCurrentSpan)
})
I have a div in my HTML page as follows:
<div class="well editor" id="highlighted-text"
style="overflow: scroll; overflow-x:hidden;height:500px;" contenteditable></div>
When I select a portion of a text inside the div and click on a button, I want to highlight the selected text.
I understand that this can be done by adding a span with a class selector, around the selected text, but I am having trouble creating the span around the selected text:
var node = window.getSelection().focusNode;
$(node).wrapInner("<b></b>");
This doesn't work. Your help is appreciated. Thanks in advance.
I got it... I did this:
var selection= window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span= document.createElement("span");
span.style.backgroundColor = "yellow";
span.appendChild(selectedText);
selection.insertNode(span);
Maybe you do not need to create such a SPAN by using the selection pseduo CSS attribute for styling:
https://css-tricks.com/overriding-the-default-text-selection-color-with-css/
My html is like this, I can only identify the div's class, there are no span' ids. I need to replace one href text and one image with some other text within those spans.
<div class ="myclass">
<span style="vertical-align:middle;">
</span>
<span style="vertical-align:middle;">
</span>
<span style="vertical-align:middle">
<span class="myspan">
<a href="http://testlink3">
<img title="test" class="imglink"></a>
</span>
</span>
<span>
Text - *This text needs to be replaced*
</span>
</div>
in the above code, I need to replace the img within the third span with a clickable text (which should take us to url) and the text within fourth span to a new text (keeping the url the same).
How can I get identify these specific spans when they are missing ids/classes?
We have 3 different things to do here:
How to replace the content inside a given element
This can be done very quickly:
$("selector").html("New text, same href");
Replace a given element with another
This can be done this way:
$("selector").replaceWith("<a href='somewhere.html'>I replaced an Img</a>");
Selecting the DOM elements
When you don't have an ID, nor a CSS class for your element, but you do know its position within another element plus some info about the element (like tagName), you can select the parent element and specify a relative position.
var myElement = $("parentElement").find("tagName:eq(position)");
Remember that this kind of selector ( "tagName:eq(position)") is zero indexed, so if you want to grab the third element, you need to tell jQuery tagName:eq(2).
So, let's say you parent element (not given in the question) is a div with a parent CSS class.
First thing you want to do is select this div.
var parent = $(".parent");
Then you want to find the Img within the third span.
var myImg = parent.find("span:eq(2)").find("img");
Now you can replace this element with the whatever you want
myImg.replaceWith("<a href='somewhere.html'>I replaced an Img</a>");
Note that jQuery allows you to pass HTML elements as a plain string.
Finally, you need to change the text inside the fourth span. This can be accomplished this way:
parent.find("span:eq(3)").find("a").html("New text, same href");
You could use document.querySelector to select an a based on the href:
document.querySelector("a[href='http://link4']").innerHTML = "The text you want to put in"
Since you're open to jQuery, this works too:
$("a[href='http://link4']").text("The text you want to put in")
var s = document.getElementsByTagName('span');
var i = spans[2].firstChild.children[1]; // here you find your img
i.parentNode.appendChild(<<your new text element>>);
i.parentNode.removeChild(img);// remove the image
var a = spans[3].firstChild; // here is your href
a.innerHTML = 'your new text';
You could use :nth-child() selector to select from the div you can identify.
More on :nth-child(): http://api.jquery.com/nth-child-selector/
Then select the img tag from the child span you found.
I am appending the text to the div like
span.insertBefore("#text");
here span represents the text that is appending. How can i get the text on any other event like button click etc.
You need to use text() function of jquery element using selector
txt = $("#text").text(); //id selector
txt = $('.classOfElement').text() //class selector
You can also get the text by using javascript like:
var text = document.getElementById('#text').innerHtml();
I have the following div tag, which will be created onload by jquery. I want to remove only the span tag and its contents which is being created inside the div. How can i do this using jquery ? I have tried innerHTML but it deletes all the contents of the div with id uniform-qualification, as I want to delete only the span tag below.
<div id="uniform-qualification" class="">
<span>BCh</span>
</div>
Note : the span tag cannot be given with an id as its being created dynamically from the UI plugin
$("#uniform-qualification > span").remove();
but you'll need to provide more information if you want a more informed answer. For example, if you have more than one span but only want to remove the first one you'll need something like:
$("#uniform-qualification > span:eq(0)").remove();
To remove all span elements within the div try the following:
$('#uniform-qualification span').remove();
To remove only child span elements:
$('#uniform-qualification > span').remove();
To remove only the first child span element:
$('#uniform-qualification > span').first().remove();
$('#uniform-qualification').html('');
That'll do the trick.