Make bold text inside element (jQuery) - javascript

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>'));

Related

Get value inside Div Javascript

ho,
I have a div that I access like so:
var gridcellrowvalue0 = gridcell0.innerHTML;
This returns to me the following div:
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
In my JS I would like to accesss the "DefaultText" variable and I have tried this:
gridcellrowvalue0.innerHTML;
gridcellrowvalue0.getAttribute("data-originaltext");
But none of them work. I'm assuming that getAttribute doesn't work because it is not really an element, it's innerhtml.
My goal is to use the "DefaultText" value in an IF-statement and therefore I simply need it.
I appreciate any pointers, my friends!
You could access your element directly from gridcell0 using gridcell0.querySelector('.DivOverflowNoWrap') instead, like :
var gridcell0 = document.querySelector('#x');
console.log( gridcell0.querySelector('.DivOverflowNoWrap').innerHTML );
Snippet:
var gridcell0 = document.querySelector('#x');
if (gridcell0.querySelector('.DivOverflowNoWrap') !== null) {
console.log(gridcell0.querySelector('.DivOverflowNoWrap').innerHTML);
} else {
console.log('Does not exist');
}
<div id="x">
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
</div>
With Javascript also it can be achieved but I am showing here using jQuery
$('document').ready(function() {
var div = $(".DivOverflowNoWrap");
var text = div.text();
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
The problem is how you access the div in the first place. If you do it like you described (with gridcell0.innerHTML). It will return a string. Not an HTML element.
Therefore you can't use .getAttribute or .innerHTML, because you try to apply it on a string. Access your div differently (querySelector or getElementBy...) and you will be able to use those.
You can use jquery:
$("[class='DivOverflowNoWrap']").text();
$("[class='DivOverflowNoWrap']").attr("data-originaltext")
It's pretty simple:
<html><head></head>
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
<script>
test();
function test(){
var x=document.getElementsByClassName("DivOverflowNoWrap Ellipsis")[0].getAttribute("data-originaltext");
alert(x);
}
</script>
</html>

Can part of Text node be highlighted?

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>

String replace with another string jquery/javascript

I have function which gets the html generated in the iframe and replaces with custom tags.For eg.<b></b> tag is replaced with [b][/b]. likewise when i press tab key ,<span class="Apple-tab-span" style="white-space:pre"></span> is generated, how do i replace this with [tab][/tab] custom tag?.Please find the script which replaces bold tag, i tried replacing the whole span tag but it did not work.
Script:
function htmltoBBcode() {
var html = $("#textEditor").contents().find("body").html();
html = html.replace(/\</gi, '[');
html = html.replace(/\>/gi, ']');
$("#custom-tag").text(html);
}
Any help much appreciated.
Jsfiddle:
You can do it like this:
function htmltoBBcode() {
var html = $("#textEditor").contents().find("body").html();
html = html.replace(/\<span.*?\>/gi, '[tab]');
html = html.replace(/\<\/span\>/gi, '[/tab]');
html = html.replace(/\</gi, '[');
html = html.replace(/\>/gi, ']');
$("#custom-tag").text(html);
}
fiddle
Very easy!
$('p').click(function(){
var t = $(this).prop('outerHTML').replace(/</g, '[').replace(/>/g, ']');
$('#custom-tag').text(t);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click me!</p>
<div id="custom-tag"></div>
retrieving text from body tag will encode it as html, I thought you could save anywhere in a temporary textarea to decode it, than replace in the output, like this:
function decodeEntities(encodedString) {
var textArea = document.createElement('textarea');
textArea.innerHTML = encodedString;
return textArea.value;
}
To replace your span tag, replace your regex like this:
html.replace(/<span>(.+)<\/span>/, '[tab]$1[/tab]');
See updated fiddle
Hope it will help! :)

jquery - Dynamically generate url

I am trying to dynamically create a url slug when a user types into an input. Unwanted characters should be removed. Spaces should be replaced by hyphens and everything into lowercase. So if a user types "Ruddy's Cheese Shop" it should render "ruddys-cheese-shop".
This is what I have so far.
<input id="tb1" />
<div id="tb2"></div>
$('#tb1').keyup(function() {
var Text = $('#tb1').val();
Text = Text.toLowerCase();
Text = Text.replace(/[^a-zA-Z0-9]+/g,'-');
$('#tb2').html($('#tb1').val(Text));
});
It almost works but I am new to js. Thanks
Your code but slightly improved.
$('#tb1').keyup(function() {
var text = $(this).val().toLowerCase();
text = text.replace(/[^a-z0-9]+/g, '-');
$('#tb2').text(text);
});
You don't need to find $('#tb1') element over and over again since you have a refference to it inside the function as $(this).
http://jsfiddle.net/jFjR3/
It looks ok except where you set the #tb2 value. I think you want:
$('#tb2').html(Text);
Of course, remember since you've called toLowerCase, you don't need to replace upper case chars. Rather a simpler regexp:
Text = Text.replace(/[^a-z0-9]+/g,'-');
If you also want to update the edit field as the user types, here's a full example. Note that it will only update #td2 when you start typing.
<html>
<head>
<script src="js/jquery.js" ></script>
<script language="javascript">
$(function() {
$('#tb1').keyup(function() {
var Text = $('#tb1').val();
Text = Text.toLowerCase();
Text = Text.replace(/[^a-z0-9]+/g,'-');
$('#tb2').html(Text);
$('#tb1').val(Text);
});
});
</script>
</head>
<body>
<input type="text" id="tb1" value="Ruddy's Cheese Shop" />
<div id="tb2"></div>
</body>
</html>
Looks like you need to run a couple of replaces i.e.
Text = Text.replace(/[\s]+/g,'-');
Text = Text.replace(/[^a-z_0-9\-]+/g,'');
That converts ruddy's Cheese Shop to ruddys-cheese-shop
Hope that helps

How to find and replace begin tag and end tags in an html string using javascript/jquery

How to find and replace begin tag and end tags in an html string using javascript/jquery
for example
var myString = "<span> Hello john</span><div> John likes to play guitar </div> <div style="color:Blue;font-weight:bold" class='quotes'>Anna likes to arrange flowers
</div>";
I need to find the "div" tag and replace with other html tag like "p" tag/ "span" tag
Resulting html string after replace "div" tag to "p" tag
var replacestring="<span> Hello john</span><p> John likes to play guitar </p> <p style="color:Blue;font-weight:bold" class='quotes'>Anna likes to arrange flowers
</p>";
Please suggest any solution.
Javascript with regular expression:
myString = myString.replace(/<(\/)?div[^>]*>/g, '<$1p>');
Also see my jsfiddle.
=== UPDATE ===
myString = myString.replace(/<(\/)?div([^>]*)>/g, '<$1p$2>');
jsfiddle 2.
myString = $('<div />').html(myString).find('div').replaceWith(function() {
var p = $('<p />');
p.html($(this).html());
$.each(this.attributes, function(index, attr) {
p.attr(attr.name, attr.value);
});
return p;
}).end().html();
jsFiddle.
Trying something with jQuery, however, I am not sure if it is any better than what alex suggested.
var $replaceString=$(replaceString);
$("div",$replaceString).each(
function()
{
var $p=$(document.createElement('p')).html($(this).html());
//add code to add any attribute that you want to be copied over.
$(this).after($p);
$(this).remove();
}
);

Categories