I am using this code which essentially types text onto the screen. I am unsure how to add a new line to the string which is being displayed.
I have already tried \n for those posting their answers. This does NOT work. A new line is not started in my HTML
Code:
var myString = "public class MyResume implements Resume{" +
/*this is where I want the new line*/ "...." ;
var myArray = myString.split("");
var loopTimer;
function frameLooper() {
if(myArray.length > 0) {
document.getElementById("myTypingText").innerHTML += myArray.shift();
} else {
clearTimeout(loopTimer);
return false;
}
loopTimer = setTimeout('frameLooper()',70);
}
frameLooper();
<div id="myTypingText"></div>
You can also use <br>.Just like"your string.<br> new line"
Here's an overly simplistic approach with full code. Use a tilde ~ and then watch for it in your frameLooper to insert a like this:
<html>
<body>
<div id="myTypingText"></div>
<script>
var myString = 'public class MyResume implements Resume{~....' ;
var myArray = myString.split("");
var loopTimer;
function frameLooper() {
if(myArray.length > 0) {
var char = myArray.shift();
if (char === '~')
{ document.getElementById("myTypingText").innerHTML += '<br/>'; }
else
{ document.getElementById("myTypingText").innerHTML += char; }
} else {
clearTimeout(loopTimer);
return false;
}
loopTimer = setTimeout('frameLooper()',70);
}
frameLooper();
</script>
</body>
</html>
Simply adding <br> to myString doesn't work because you're inserting each character at one time. When a character gets added with innerHTML, JavaScript encodes it:
$('element').innerHTML += "<";
> "string<"
If you did this for each character in <br>, you'd end up with
>"string<br<"
You need some way to tell your script to add the entire element when you reach a "break character". You could use an uncommon character like a pipe | or you could add a method which looks ahead to make sure that the next few characters don't spell out <br>.
To add string to a new line, you need the \n in your string. For example:
var string = 'This is the first line \nThis is the second line'
console.log(string)
This would output
This is the first line
This is the second line
Why don't you just append ul>li or p to your text, something like this:
document.getElementById("myTypingText").innerHTML += "<p>" + myArray.shift() "</p>";
or
document.getElementById("myTypingText").innerHTML += "<li>" + myArray.shift() "</li>";
with:
<ul id="myTypingText"></ul>
Related
I added some text to div like this:
document.getElementById("" + choice).innerHTML += "e";
But later in my script I want to check if that div contains my text. I have tried the below code:
if (document.getElementById("" + choice).innerHTML === "e") {
alert('yep!');
}
But it doesn't work, I don't get the "yep!' alert. How do I fix it?
You are appending the text using += operator and not completely setting it to e.
Thus, if the innerHTML was foo it would be fooe.
What you might want to do is:
if ((document.getElementById("" + choice).innerHTML).indexOf("e") !== -1) {
alert('yep!');
}
You should use :
if (document.getElementById("hello").innerHTML.includes("e")) {
alert('yep!');
}
<div id="hello">hello world</div>
Because in this code:
document.getElementById("" + choice).innerHTML += "e";
you are adding "e" to innerHTML
use document.getElementById("" + choice).innerHTML.contains("e")
You can do it this way:
var myContent = "e"
document.getElementById("" + choice).innerHTML += myContent;
if (document.getElementById("" + choice).innerHTML.includes(myContent)) {
alert('yep!');
}
If you did intend to use the += operator instead of =. You might have whitespace in your div. You can use the trim function to get rid of that like in this snippet.
If you change the operator to = you can still use the check without trim.
document.getElementById("test").innerHTML += "e";
console.log('innerHTML value: "' + document.getElementById("test").innerHTML + '"');
if (document.getElementById("test").innerHTML === "e") {
console.log('passed');
}
if (document.getElementById("test").innerHTML.trim() === "e") {
console.log('passed with trim');
}
<div id="test"> </div>
+= means concat new value to current value. i guess if you want to replace the div's innerHTML to "e", youshould replace "+=" in
document.getElementById("" + choice).innerHTML += "e";
to "=".
else if you'd like to append string to div's innerHTML, you should replace '===' in
if (document.getElementById("" + choice).innerHTML === "e") {
alert('yep!');
}
to includes function.
I have the following HTML string:
<div><p>Hello <b>how are</b> you?</div>
I would like to loop the HTML string DOM and wrap each word with a span tag and the word number as id so result will be like this:
<div><p><span id="word-1">Hello</span> <b><span id="word-2">how</span> <span id="word-3">are</span></b> <span id="word-4">you?</span></div>
I've tried to use the JQuery method $.parseHTML but no luck to count the words because DOM node value can contain more than one word in it..
In addition, if inside the word there is inline tags such <b> / <i> so from DOM point of view each tag has a different node value even when its the same word)
Any idea how to solve this issue? how to count words inside a HTML DOM string?
Thanks
Try this.
HTML
<div id="content">
<div><p>Hello <b>how are</b> you?</div>
</div>
Script
var textNodes = $("#content *").contents().filter(function() {
return this.nodeType === 3;
});
var counter = 1;
for(var i = 0;i<textNodes.length;i++)
{
var val = $(textNodes).eq(i).text();
var words = val.split(" ");
var final = "";
for(var j = 0;j<words.length;j++)
{
if(words[j].trim() != "")
{
final += "<span id='"+ counter +"'>"+ words[j] +" </span>";
counter++;
}
}
$($(textNodes)[i]).replaceWith(final);
}
Jsfiddle Link
As of my understanding of your question this should work.
var allText = $("body").text().replace(/<[^>]*>/g, "");
var words = allText.split(' ');
for(var i=0;i<words.length;i++)
{
$(div).append("<span id = 'word-'"+i+">"+words[i]+"</span>")
}
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>
I have a problem with the BULLET character in my Android App developed with Titanium.
I have this part of code:
function getFormattedPizza()
{
var text = win.crust + ' pizza with:\n';
if (win.toppings.length == 0)
{
text += '• Plain (cheese pizza)\n';
}
else
{
for (var i = 0; i < win.toppings.length; i++)
{
text += '• ' + win.toppings[i] + '\n';
}
}
return text;
}
and in my app I see the string &bull ; Plain (cheese pizza), not an unordered list.
In that way I can show a dots list?
instead of &bull you can use the '\u2022'+'Plain (cheese pizza)', \u2022 is the unicode for bullet.
Samlple code :
var lbl = Ti.UI.createLabel({
text : '\u2022'+' HELLO'
});
win.add(lbl);
For more unicodes you can check this Link, or refer to this question.
Hope this will help you. :)
for some reason the gi modifier is behaving as case sensitive. Not sure what's going on, but maybe someone knows why this is. it works fine when the cases are the same. This JSFiddle will demonstrate my problem. Code below. Thanks.
javaScript:
var search_value = $('#search').val();
var search_regexp = new RegExp(search_value, "gi");
$('.searchable').each(function(){
var newText =(this).html().replace(search_value, "<span class = 'highlight'>" + search_value + "</span>");
$(this).html(newText);
});
HTML:
<input id = "search" value = "Red">
<div class = "searchable">this should be red</div>
<div class = "searchable">this should be Red</div>
Correct Code is
var search_value = $('#search').val();
var search_regexp = new RegExp(search_value, "gi");
$('.searchable').each(function(){
// var newText =$(this).html().replace(search_value, "<span class = 'highlight'>" + search_value + "</span>");
var newText =$(this).html().replace(search_regexp, function(matchRes) {
return "<span class = 'highlight'>" + matchRes + "</span>";
});
$(this).html(newText);
});
output
Fiddle
Issues with your code:-
First: search_regexp - You haven't used search_regexp anywhere in your code
Your Code
var newText =$(this).html().replace(search_value, "<span class = 'highlight'>" + search_value + "</span>");
Second
You are using search_value to replace. It will make both Red and red to either Red or red after replace.
eg: if search_value is Red then your output will be
this should be Red
this should be Red
you should use matched result instead of search_value
Third: How to use RegExp with replace function?
Correct Method is
var newText =$(this).html().replace(search_regexp, function(matchRes) {
return "<span class = 'highlight'>" + matchRes + "</span>";
});
Explanation
replace(<RegEx>, handler)
Your code isn't using your regex in the replace call, it's just using the search_value. This JSBin shows your code working: http://jsbin.com/toquz/1/
Do you actually want to replace the matches with the value (changing lowercase instances to uppercase in this example)? Using $.html() will also get you any markup within that element, so keep that in mind as well (in case there's a chance of having markup in the .searchable elements along with text.
Might be easier to do:
function highlight(term) {
var search_regexp = new RegExp(term, "gi");
$('.searchable').each(function(){
if (search_regexp.test($(this).html())) {
var highlighted = $(this).html().replace(search_regexp, function(m) {
return '<span class="highlight">'+m+'</span>';
});
$(this).html(highlighted);
}
});
}
Your original code in the JSBin is the highlightReplace() function.