Can part of Text node be highlighted? - javascript

I am creating Text node like var liContent = document.createTextNode(someHtmlString);.
And then add this variable into list like $("<li/>").html(liContent).appendTo(targetUnorderList);
Question is: Can I highlight some text in the liContent item?
And if "Yes" - how can I do that?
Clarification: I need to highlight partial content within li. For example, word Nice.
Update:
At the same time I need to display all content of Text node just like a text (including html tags).
Update 2: No processing is allowed on the string which need to be displayed. Seems there are no solution, because Text node is interpreted by browser just like a plain text.
Whole code example (working):
var someHtmlString = "<i class='icon-window-add'>Nice text here</i>";
var targetUnorderList = $("#targetUnorderList");
var liContent = document.createTextNode(someHtmlString);
$("<li/>").html(liContent).appendTo(targetUnorderList)[0];
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul id="targetUnorderList"></ul>
</div>

Yes you could just create a custom class highlight then wrap the text you want to highlight by span with this class, Since you're using jQuery it could be done simply like :
$("<li/>").html("<i class='icon-window-add'>Nice <span class='highlight'>text here</span></i>");
Hope this helps.
var li = $("<li/>").html("<i class='icon-window-add'>Nice <span class='highlight'>text here</span></i>");
$("#targetUnorderList").append(li);
.highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="targetUnorderList"></ul>
</div>

try this , it will show the "highlighted text" in red color
var someHtmlString1 = "<i class='icon-window-add'>Nice ";
var someHtmlString2="Highlighted text</span>";
var someHtmlString3="here</i>";
var targetUnorderList = $("#targetUnorderList");
var span1Text=document.createTextNode(someHtmlString1);
var span3Text=document.createTextNode(someHtmlString3);
var li=$("<li/>");
var span1=$("<span/>").html(span1Text).appendTo(li);
var span2=$("<span style='color:red'/>").html(someHtmlString2).appendTo(span1);
var span3=$("<span/>").html(span3Text).appendTo(li);
li.appendTo(targetUnorderList)[0];
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul id="targetUnorderList"></ul>
</div>

Related

Change text of element for each element that have the same class in jQuery

So, I'm trying to only show certain part of the text. The info is passed like this. Ex: ["PS4"] and I only want the PS4 text to show so I did this with jQuery:
var text = $('.gender').text();
var text2=text.substring(text.indexOf('"')+1,text.lastIndexOf('"'));
$('.gender').text(text2);
The problem is that I want to change every single element text that have .gender class but only having their corresponding text, like so:
["PS4"]["XBOX"]
<div class="gender">PS4</div><div class="gender">XBOX</div>
I tried to do it with .each() function but I got something like this:
<div class="gender">PS4"]["XBOX</div><div class="gender">PS4"]["XBOX</div>
Here's the code with jQuery .each():
$('.gender').each(function(){
var text = $('.gender').text();
var text2=text.substring(text.indexOf('"')+1,text.lastIndexOf('"'));
$('.gender').text(text2);
});
EDIT:
I have an HTML with this:
<div class="gender">["PS4"]</div>
<div class="gender">["XBOX"]</div>
So I want to remove the '[""]' from every element that have .gender class so it shows like this:
<div class="gender">PS4</div>
<div class="gender">XBOX</div>
Use $(this) and not $(".gender")
$('.gender').each(function() {
var text = $(this).text();
var text2 = text.substring(text.indexOf('"') + 1, text.lastIndexOf('"'));
$(this).text(text2);
});
demo
$('.gender').each(function() {
var text = $(this).text();
var text2 = text.substring(text.indexOf('"') + 1, text.lastIndexOf('"'));
$(this).text(text2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gender">["PS4"]</div>
<div class="gender">["XBOX"]</div>
You may go for RegEx, with $.text(callback)
$(function() {
$('.gender').text(function() {
return $(this).text().replace(/^\[\"(.*)\"\]$/, '$1');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gender">["PS4"]</div>
<div class="gender">["XBOX"]</div>
Breakup of, ^\[\"(.*)\"\]$ as below:
^ starts with
(.*) group having any match of any length
$ ends with
Try this one also:
$('.gender').each(function() {
var text = $(this).text();
var text2 = text.replace("\"]", "");
text2 = text2.replace("[\"", "");
$(this).text(text2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gender">["PS4"]</div>
<div class="gender">["XBOX"]</div>

Make bold text inside element (jQuery)

I'm trying to make text (fat) bold. Curretly I managed to do this whit code below:
Movie <b>fat</b> was been added
But this bold tags won't work. Now the question is how to enable html for only (fat), to be bold like this: Movie fat was been added
My code so far:
var boldy = (Movie[0].title)
var fat = boldy.bold()
$("div.container div:first").text("Movie " + (fat) + " was been added")
I also tried whit this:
$("div.container div:first").html("Hello <b>"+(boldy)+"</b>")
var word ="fat"
$("div:first").html("Movie <b>"+word+"</b> was been added")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
You can use the following:
$("div.container div:first").css("font-weight","Bold");
That will change the property font-weight from that div to bold.
#EDIT: You can make a div with an ID and set that ID on the jQuery mention:
$("div.container div:first div#text").css("font-weight","Bold");
var world = 'world';
$("div").html(`Hello <b>${world}</b>`);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Movie fat was been added
</div>
var html = $("div.container div:first").html;
$("div.container div:first").html(html.replace(/fat/gi, '<strong>$& </strong>'));

How to get the text with in span tag using jquery?

I want get text within this span tag using its class:
<span id="prizevalue_g12" class="pull-right grid_val">£12</span>
I want to get 12. I tried the below code:
var ex_price = $(".grid_val").html();
and
ex_price = $(".grid_val").html();
You can use replace() to remove £.
$(document).ready(function(){
var ex_price = $(".grid_val").html();
ex_price = $(".grid_val").html();
var ans=ex_price.replace('£', '') ;
alert(ans);
});
This is just a tought, but I think this would be a perfect place to use some custom data-attributes, like data-value. It would work nice especially if you have a lot of these values to get.
The outcome would be smthn like this:
<!-- HTML -->
<span class="grid_val" data-value="12">£12</span>
<span class="grid_val" data-value="15">£15</span>
<span class="grid_val" data-value="13">£13</span>
<span class="grid_val" data-value="1">£1</span>
<script>
$(".grid_val").each(function(){
var value = $(this).attr("data-value");
//do something with it
});
</script>

Replace text, and replace it back

I am using this code to replace text on a page when a user clicks the link. I would like a way to replace it back to the initial text using another link within the replaced text, without having to reload the page. I tried simply adding the same script within the replaced text and switching 'place' and 'rep_place' but it didn't work. Any ideas? I am sort of a novice at coding so thanks for any advice.
<div id="place">
Initial text here
<SCRIPT LANGUAGE="JavaScript">
function replaceContentInContainer(target,source) {
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
</script>
<div class="text" onClick="replaceContentInContainer('place', 'rep_place')">
<u>Link to replace text</u></div></div>
<div id="replacements" style="display:none">
<span id="rep_place">
Replacement text here
</div></span>
Where do you store the original text? Consider what you're doing in some simpler code...
a = 123;
b = 456;
a = b;
// now how do you get the original value of "a"?
You need to store that value somewhere:
a = 123;
b = 456;
temp = a;
a = b;
// to reset "a", set it to "temp"
So in your case, you need to store that content somewhere. It looks like the "source" is a hidden element, it can just as easily hold the replaced value. That way values are swapped, not just copied. Something like this:
function replaceContentInContainer(target,source) {
var temp = document.getElementById(target).innerHTML;
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
document.getElementById(source).innerHTML = temp;
}
So replace them you simply call:
replaceContentInContainer('place', 'rep_place')
Then to swap them back:
replaceContentInContainer('rep_place', 'place')
Note that this will replace the contents of the "source" element until they're swapped back again. From the current code we can't know if that will affect anything else on the page. If so, you might use a different element to store the original values. That could get complex quickly if you have a lot of values that you need to store.
How's this? I store the initial content in an element of an array called initialContent.
<div id="place">
Initial text here [replace]
</div>
<div id="replacements" style="display:none">
<span id="rep_place">
Replacement text here [revert]
</span>
</div>
<SCRIPT LANGUAGE="JavaScript">
var initialContent = [];
function replaceContentInContainer(target,source) {
initialContent[target] = document.getElementById(target).innerHTML;
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
function showInitialContent(target) {
document.getElementById(target).innerHTML = initialContent[target];
}
</SCRIPT>
Working example: http://jsbin.com/huxodire/1/
The main changes I did were the following:
I used textContent instead of innerHTML because the later replaces the whole DOM contents and that includes removing your link to replace the text. There was no way to generate that event afterwards.
I closed the first div or else all the text would be removed with the innerText including the text that works as a link.
You said you wanted to replace back to the original text, so I used a variable to hold the last value only if this existed.
Hope this helps, let me know if you need more assistance.
The div tags were mixed up and wiping out your link after running it. I just worked with your code and showed how you could switch.
<div id="place">
Initial text here
</div>
<SCRIPT LANGUAGE="JavaScript">
function replaceContentInContainer(target,source) {
document.getElementById(target).innerHTML =
document.getElementById(source).innerHTML;
}
</script>
<div class="text" onClick="replaceContentInContainer('place', 'rep_place')">
<u>Link to replace text</u></div>
<div class="text" onClick="replaceContentInContainer('place', 'original_place')">
<u>Link to restore text</u></div>
<div id="replacements" style="display:none">
<span id="rep_place">
Replacement text here
</span>
<span id="original_place">
Initial text here
</span>
</div>

How can I get the text between 2 elements

<div class="container">
asd
[I want get this text]
asd
Anouther text i dont need.
</div>
How can I withdraw the text between elements (not the inner text of elements, in this case I should get "[I want get this text]")?
DEMO
I think the simplest way would be to deal with the native dom elements:
var a = $(".container a")[0];
var textNode = a.nextSibling;
var text = textNode.textContent;
Note that var text = textNode.nodeValue; will also work, but I'm not sure which is preferable.
One way is to enclose the part in a span tag and get the contents of the span:
<div class="container">
asd
<span id="i_want_this">[I want get this text]</span>
asd
Anouther text i dont need.
</div>
myVal = $("#i_want_this").html();

Categories