Replacing – character using Javascript or JQuery - javascript

I need to replace the dash in a title on by site with a span tag and line break to break to title over two lines.
Unfortunately I don't have access to do this in the PHP :(
The below statement seems to do this. Although with bugs as it's making this change to the character throughout the page.
document.body.innerHTML = document.body.innerHTML.replace(/\u2013/g, "</span><br /><span>");
The jQuery solution I tried below, works but sometimes the element would have a visibility hidden on the element!
$("#events h3 a").each(function() {
$(this).html($(this).html().replace(/\u2013/g,"</span><br /><span>"));
});
Ideally I would like to use the pure JavaScript version above but need help navigating to the Events Link.
#events h3 a
Thanks anybody who can help, I have hunted for a solution everywhere.
This is an example of the page structure. And explains why the span close and start are back to front in the code excerpt. This is so each half can be styled when on separate lines.
<ul id="events">
<li>
<h3>
<a href="http://example.com">
<span>First Events Title - On Every Sunday</span>
</a>
</h3>
</li>
<li>
<h3>
<a href="http://example.com">
<span>Second Events Title - On Every Monday</span>
</a>
</h3>
</li>
</ul>

It seems so simple, is this a trick question? If it as simple as i thought try this.
$(function () {
$("#events h3 a").each(function () {
$(this).html($(this).html().split(" - ").join("</span><br/><span>"));
});
});

document.getElementById('events').innerHTML

I am not sure why you do the special encoding in your regex (maybe something I am missing). Anyway, this works
$("#events h3 a span").each(function() {
$(this).html($(this).html().replace("-","</span><br /><span>"));
});

Here's a JavaScript way to do it
jsfiddle
var replaceDashes = function() {
var body = document.getElementsByTagName('body')[0];
// copied an – character to use in the replace
body.innerHTML = body.innerHTML.replace(/ – /g, '</span><br /><span>');
};
replaceDashes();

Try using u002d instead of u2013.
$("#events h3 a").each(function() {
$(this)
.html($(this)
.html()
.replace(/\u002d/g, "<span /><br /><span>"));
});
updated JavaScript code
Update
Interestingly u002d refers to ASCII hyphen and u2013 refers to the en dash. It appears "-" is seen as the ASCII hyphen, and not as the en dash. Honestly, it's quite confusing since they look alike :-S.
Here's a web page for the special characters for commonly confused with, like hyphen and en dash.
So, I've updated the code, replacing "-" with "& # x2013" [SO sanitizes my entry :)] in the html and it will work as you expected.
<ul id="events">
<li>
<h3>
<a href="http://example.com">
<span>First Events Title &#x2013 On Every Sunday</span>
</a>
</h3>
</li>
<li>
<h3>
<a href="http://example.com">
<span>Second Events Title &#x2013 On Every Monday</span>
</a>
</h3>
</li>
</ul>
Unicode version
Alternately, you may use "& ndash ;" [Again, SO sanitizes my entry] instead of the Unicode form
<ul id="events">
<li>
<h3>
<a href="http://example.com">
<span>First Events Title – On Every Sunday</span>
</a>
</h3>
</li>
<li>
<h3>
<a href="http://example.com">
<span>Second Events Title – On Every Monday</span>
</a>
</h3>
</li>
</ul>
ndash'ed version

Related

Fetching value from tag without using id or class

<div class="typeahead-result">
<ul class="typeahead-list">
<li>
<a data-index="0" data-group="Restaurant" href="javascript:;"><strong>Cafe</strong> Hollywood <small style="color:#999;">Restaurant</small></a>
</li>
<li>
<a data-index="1" data-group="Estb" href="javascript:;"><strong>cafe</strong><small style="color:#999;">Estb</small></a>
</li>
</ul>
</div>
Here I am having the text value of <a> tag that is "Cafe Hollywood" and I want its attribute value for data-group="?"
You can use:
$('[data-group="Estb"] small').text();
Instead of <small>, you could use <span id="spanId" style="font-size:small">
Then you would be able to call the span in your javascript. Yes, your version is a bit shorter, but in the long run you want to avoid deprecated tags like <small>, <underline>, <b>, etc exactly because of problems like this
Yes, you can directly get the value of each small tag, as follows:
var my_small_value;
$('li').getChildren().find('small').click(function(){
my_small_value = this.text();
alert(my_small_value);
});
Try this
alert($("li").eq(1).find("a").attr("data-group"));

Using Javascript Regex to get part of Href During Mouseover

I has this Html Code below
<div class="first-div">
<ul>
<li>PHP</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
<div class="second-div"></div>
i want when mouseover on PHP,CSS and HTML Link:
Create The Javascript REGEX to get only (php,css,html) without # sign from href in first-div.
then add (php,css,html) as ID to second-div.
You don't need a regex, the part after the # is a hash, and is available directly.
$('a').on('mouseover', function(e) {
e.preventDefault();
$('.second-div').prop('id', this.hash.substr(1));
});
Not sure why you would ever set the ID dynamically, but whatever floats your goat !

s3slider code is not validating - cannot have <div> inside of <ul>?

My s3slider is working perfectly, but I cannot get it to validate. I keep getting the error message "document type does not allow element "div" here; assume missing "li" start-tag [XHTML 1.0 Transitional]" and "end tag for "li" omitted, but OMITTAG NO was specified [XHTML 1.0 Transitional]".
Lots of people use this slider, so they just all have invalid code? The problem is the <div class="clear s3sliderImage"></div> nested inside of the <ul>. If I place it outside of the ul, the last image of the silder doesn't show - just like the author points out in the link below.
See s3slider code and instructions here.
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="#">
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="#">
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
The only valid child of a ul is an li. To get this to validate, move the clearer inside the last li, or outside the ul.
Better, set overflow: hidden on li.sliderImage and skip the clearing div altogether. In fact, removing it on the demo page doesn't seem to have any adverse effects, at least in Chrome. My guess is that it's a fix for old IE issues.

Add a space between ul and li element created by JavaScript

Been struggling with a problem now.
I have a list that behaves quite weird, and couldt find the problem until i firebugd it and saw that the entire file prints out in one row.
something like this.
<div class="clock-content-wrapper"><ul class="clock-digit-wrapper hour"><li class="clock-digit-one"></li><li class="clock-digit-three"></li></ul><ul class="clock-digit-wrapper minute"><li class="clock-digit-three"></li><li class="clock-digit-seven"></li></ul><ul class="clock-digit-wrapper second"><li class="clock-digit-zero"></li><li class="clock-digit-zero"></li></ul></div>
There is no spaces between the elements.
Now i didn't know that could be a problem so i started to fix the elements in firebug like this.
<div class="clock-content-wrapper">
<ul class="clock-digit-wrapper hour">
<li class="clock-digit-one"></li>
<li class="clock-digit-three"></li>
</ul>
<ul class="clock-digit-wrapper minute">
<li class="clock-digit-three"></li>
<li class="clock-digit-seven"></li>
</ul>
<ul class="clock-digit-wrapper second">
<li class="clock-digit-zero"></li>
<li class="clock-digit-zero"></li>
</ul>
</div>
And notice that if i have the </ul> element under my </li> the script actually works at it supposed to.
Is there a way to structure the file with javascript ?
I have a jsFiddle, where you can se the differens between the tree created in HTML and the one with JavaScript.
http://jsfiddle.net/Xk49c/
I really dont want to change anything in the css . since both html and js application is using the same css .
Your <ul> elements are displayed as inline-block in your fiddle. I suspect they are suffering from this little-known feature of inline-block.
The problem is, when you create the elements using HTML, you indent or separate the elements with one or more spaces, or even new lines. HTML renders these spaces as ONE single space and so you see the space between those elements.
To add spaces between elements created by JavaScript, either you ll have to add a padding left to minute and second class, or insert a text node between each UL
hours = createElementWithClass('ul', 'clock-digit-wrapper hour');
clock_toolbar_wrapper_close.appendChild(hours);
clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // Add this
minutes = createElementWithClass('ul', 'clock-digit-wrapper minute');
clock_toolbar_wrapper_close.appendChild(minutes);
clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // And this

jQuery clone link and wrap/appendto/replace?

I just want to clone the link provided (i.e. href="xxx", not all the junk in between) and put that link on another link elsewhere on the page.
This is the link I want to clone:
<a href="/ReviewNew.asp?ProductCode=TRU%2DGDM49">
<span class="PageText_L479n"> |
<span id="write">Write a review</span>
</span>
</a>
This is where I want to clone the link to (on id sendreviewlink):
<li id="sendreview">
<a id="sendreviewlink" href=""><em>Write a Quick Review</em>
<span class="hwText">Earn $2 For Every Approved Review</span>
</a>
</li>
This is my JavaScript code which I have tried so far:
$('#write').closest('a').clone().wrap('#sendreviewlink');
$('#write').closest('a').clone().appendTo('#sendreviewlink');
$('#write').closest('a').clone().ReplaceAll('#sendreviewlink');
you can just set the href like this
$('#sendreviewlink').attr('href',$('#write').closest('a').attr('href'));
Here you go!
http://jsfiddle.net/bsXTM/
Not very polished tho, but ill leave that up to you.

Categories