I'm using blogger as my blogging platform. In my blog homepage, I create a function to grab all images from single post for each post (there are 5 posts in my homepage), then append all images from single post to single slider, for each post.
This is my function script (I place it after <body> tag):
<script type='text/javascript'>
//<![CDATA[
function stripTags(s, n) {
return s.replace(/<.*?>/ig, "")
.split(/\s+/)
.slice(0, n - 1)
.join(" ")
}
function rm(a) {
var p = document.getElementById(a);
img = p.getElementsByTagName("img").each( function(){
$(".flexslider .slides").append($("<li>").append(this));
});
p.innerHTML = '<div class="entry-container"><div class="entry-content"><div class="entry-image"><div class='flexslider'><ul class='slides'></ul></div></div><div class="entry-header"><h1>' + x + '</h1></div><p>' + stripTags(p.innerHTML, SNIPPET_COUNT) + '</p></div></div>'
}
//]]>
</script>
Then my variable, each post have single variable, different for each post based on it's ID:
<script type='text/javascript'>var x="Post Title",y="http://myblog.url/post-url.html";rm("p8304387062855771110")
My single post markup:
<span id='p8304387062855771110'></span>
The problem is, the append function in my script not work. Am I forget something in my code?
Your jQuery/JavaScript is very ropey. There is no method each on a nodelist. Try not to mix jQuery/JavaScript up so much. And you might consider using a array/join on the html you want to insert to keep the line length readable. That way you might have noticed that your HTML quotes were not consistent.1
var $p = $('#' + a);
$p.find('img').each(function () {
var html = $('<li>').append($(this))
$('.flexslider .slides').append(html);
});
var html = [
'<div class="entry-container"><div class="entry-content">',
'<div class="entry-image"><div class="flexslider">',
'<ul class="slides"></ul></div></div><div class="entry-header">',
'<h1><a href="',
y,
'">',
x,
'</a></h1></div><p>',
stripTags(p.innerHTML, SNIPPET_COUNT),
'</p></div></div>'
].join('');
$p.html(html);
1 Personally I prefer single quotes for JS work and double quotes for HTML attributes and never the twain shall meet.
I think <li> doesnt work try li like this:
$(".flexslider .slides").append($("li").append(this));
You could get rid of type="text/javascript" and //<![CDATA[, it is 2014, after all ;-)
Also, .*? is not what you mean.
<script>
function stripTags(s, n) {
return s.replace(/<[^>]*>/g, "") // Be careful with .*? : it is not correct
.split(/\s+/)
.slice(0, n - 1)
.join(" ")
}
function rm(id) {
var $p = $('#' + id);
img = $p.find("img").each( function(){
$(".flexslider .slides").append($("<li>").append(this));
});
p.innerHTML = '<div class="entry-container"><div class="entry-content"><div class="entry-image"><div class="flexslider"><ul class="slides"></ul></div></div><div class="entry-header"><h1>' + x + '</h1></div><p>' + stripTags(p.innerHTML, SNIPPET_COUNT) + '</p></div></div>'
}
</script>
Related
Any idea how make it with link? I try but nothing
<h3 class="wd-entities-title">WIANEK Amarylis bohaterem</h3>
$(".wd-entities-title").each(function() {
var html = $(this).html().split(" ");
html = html[0] + "<br>" + html.slice(1).join(" ");
$(this).html(html);
});
http://jsfiddle.net/nd46b23L/
The text you want to separate is inside an <a> tag - you should include that in your query or else the first space you'll encounter is the space in the <a> tag.
$(".wd-entities-title a").each(function() {
var html = $(this).html().split(" ");
html = html[0] + "<br>" + html.slice(1).join(" ");
$(this).html(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="wd-entities-title">WIANEK Amarylis bohaterem</h3>
Slightly less verbose approach using html(function) which will iterate over all instances of matching selector <a> exposing the current html for each instance
Then use replace() to insert the break at first space and return the modified string
$(".wd-entities-title a").html((i, curr) => curr.trim().replace(' ', ' <br/>'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="wd-entities-title">WIANEK Amarylis bohaterem</h3>
I am pulling some text from a database and I have , and I would like to replace them with <br> don't really know why it's not working any ideas?
JS Code
$( document ).ready(function() {
//.MoreInfoText
var $infotext = $('.MoreInfoText').text().replace(/\+/g, '<br>');
$.each($infotext, function() {
$('.MoreInfoText').text($infotext);
});
});
Text as its coming from the DB:
Ryan open 30/01/1998, ryan added numberOFIteams of NameOFIteams
1st use replace(/\,/g, '<br>')); yours only replace +
(note the g means replace all, you can also make the search case-insensitive pass the "i" parameter ex: /gi)
2nd use $('.MoreInfoText').html() so your <br> are treated as HTML instead of string.
$( document ).ready(function() {
//.MoreInfoText
$('.MoreInfoText').html($('.MoreInfoText').text().replace(/\,/g, '<br>'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="MoreInfoText">11111,22222,33333,44444,55555</span>
It should be .replace(/,/g,"<br>") so all ,s get replaced with <br>. Right now it's replacing + with <br>.
Also to iterate over every element with class MoreInfoText replacing , with <br> modify your code like this:
$('.MoreInfoText').each(function() {
var text = $(this).text().replace(/,/g, '<br>')
$(this).html(text);
});
Try to use the following code:
$( document ).ready(function() {
//.MoreInfoText
var $infotext = $('.MoreInfoText').text().replace(',', ' ');
$.each($infotext, function() {
$('.MoreInfoText').text($infotext);
});
});
I would recommend avoiding the usage of <br /> for adding line breaks, you may consider using <p> instead.
$( document ).ready(function() {
//.MoreInfoText
$('.MoreInfoText').each(function() {
var moreArray = $(this).text().split(',');
var $infotext = '';
for(var i = 0; i < moreArray.length; i++){
$infotext += '<p>' + moreArray[i] + '</p>';
}
$(this).empty().html($infotext);
});
});
If paragraphs are not already placed each on a new line, you can add a CSS rule for that. This helps separating the content from the presentation, which is what CSS is for.
I don't have many knowlege in javascript so I don't know what is the problem here,
I create divs dynamically in js and each div call a function when is clicked but the function is not recongized. This is part of the code
for (......) {
var listatema = document.createElement("div");
listatema.innerHTML += "<a href='javascript: void(0)' onClick='functest(" + pag + ")'>" + temat + "</a>";
document.getElementById('menu').appendChild(listatema);}
}
"tema" is a text, the function "functest" has an argument "pag[aux]", this is a number.
The function is:
function functest(arg){
console.log(arg)
}
other alternative that i tried is change that: onClick='"+ functest(pag) +"':
i change the position of Quotation marks "" and the function work good but it is executed when the page is loaded, it don't wait to do click.
Your code should work if you're doing something like:
function functest(arg) {
console.log(arg);
}
for (var i = 0; i < 10; i++) {
var listatema = document.createElement("div");
listatema.innerHTML += "<a href='javascript: void(0)' onClick='functest(" + i + ")'>" + i + "</a>";
document.getElementById('menu').appendChild(listatema);
}
<div id="menu"></div>
I would, however, recommend using addEventListener or setting the onClick handler on the document element object rather than setting the innerHTML. Note that setting innerHTML is not advised, especially when rendering user input. See https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Security_considerations. In your case, it probably isn't really an issue, but it's good practice to avoid it if you can :)
for (var i = 0; i < 5; i++) {
var wrapper = document.createElement("div");
var listatema = document.createElement("a");
listatema.textContent = i;
listatema.href = "javascript:void(0)";
listatema.addEventListener('click', function(e) {
console.log(this.i);
}.bind({ i : i }));
wrapper.appendChild(listatema);
document.getElementById('menu').appendChild(wrapper);
}
<div id="menu"></div>
onClick='functest(\""+ pag +"\")'
you forgot to quote the parameter.
I am trying to replace the selected text in the p tag.I have handled the new line case but for some reason the selected text is still not replaced.This is the html code.
<p id="1-pagedata">
(d) 3 sdsdsd random: Subject to the classes of this random retxxt wee than dfdf month day hello the tyuo dsds in twenty, the itol ghot qwerty ttqqo
</p>
This is the javascript code.
function SelectText() {
var val = window.getSelection().toString();
alert(val);
$('#' + "1-pagedata").html($('#' + "1-pagedata").text().replace(/\r?\n|\r/g,""));
$('#' + "1-pagedata").html($('#' + "1-pagedata").text().replace(/[^\x20-\x7E]/gmi, ""));
$('#' + "1-pagedata").html($('#' + "1-pagedata").text().replace(val,"textbefore" + val + "textAfter"));
}
$(function() {
$('#hello').click(function() {
SelectText();
});
});
I have also created a jsfiddle of the code.
https://jsfiddle.net/zeeshidar/w50rwasm/
Any ideas?
You can simply do $("#1-pagedata").html('New text here');
Since your p doesn't content HTML but just plain text, your can use both html() or text() as getter and setter.
Also, thanks to jQuery Chaining you can do all your replacements in one statement. So, assuming your RegExp's and replacement values are correct, try:
var $p = $('#1-pagedata');
$p.text($p.text().replace(/\r?\n|\r/g,"").replace(/[^\x20-\x7E]/gmi, "").replace(val,"textbefore" + val + "textAfter"));
I am pulling in tweets through a getJSON and writing them to a Google map infowindow with javascript. The problem is, these tweets come with text links but no formatting (and no ids/classes/anything for which to narrow a find and replace). This is the mash of code I'm using right now to find the text, but I can't get it to wrap whatever it finds in <a> tags to properly display the links:
function wrap( str ) {
return '<a href="' + str + '">' + str + '<\/a>';
};
function replaceText() {
var jthis = $(this);
$("*").each(function () {
if (jthis.children().length == 0) {
jthis.text(jthis.text().replace(/\bhttp[^ ]+/i, wrap));
}
});
}
$(document).ready(replaceText);
$("html").ajaxStop(replaceText);
Did I overlook something or does anyone know a better way to do this?
If i understand your problem right, this should work.
not sure why you are iterating through elements as regexp will scan all the text anyway.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script>
function wrap( str ) {
return '<a href="' + str + '">' + str + '<\/a>';
};
function replaceText() {
$(".tweet").each( function(){
$(this).html($(this).html().replace(/\bhttp[^ ]+/ig, wrap));
})
}
$(document).ready(replaceText);
</script>
</head>
<body>
<div class="tweet"> test 1 http://example.com/path </div>
<div class="tweet"> test 2 http://example.com/path </div>
</body>
</html>