js split, at the end of a line - javascript

Im making a web page that, will get the html code of it self and then, replace all the harmful html codes like < and > and change them to the ascii counterparts so it doesn't skew it up but it looks write to the user also.
I need it to sperate the lines, by ether using the break line html code <br /> or some other way, I know how many lines I have by using themehtml.split("\n");
So the question is 'I need a way to add a line break at the end of the line'
This Is my most of my js code that kind of helps the question a bit
$(".edit_html_button").click(function()
{
var themehtml = $(".wrapper").html();
var oldhtml = _grubber_blog.html();
themehtml = themehtml.replace(/</g, "<"); //slowly removing html codes
themehtml = themehtml.replace(/>/g, ">"); //slowly removing html codes
themehtml = themehtml.split(' ').join(' ');//slowly removing html codes
themehtml = ("<div class='numberboxleft'></div><div class='edit_theme' contenteditable='true'>"+themehtml+"</div>");
themehtml = themehtml.split("\n");
//alert(themehtml);
_grubber_blog.css("background-color", "#fff");
$("#tiptip_holder").remove();
$("._grubber_blog_customize").html(" ");
$("._grubber_blog_customize").html(themehtml);
//adds the numbers up the left side
var e = 0;
var lenght = themehtml.length;
var numbers = "";
while (e < lenght){
numbers = $(".numberboxleft").html();
$(".numberboxleft").html(numbers + e + "<br />");
e++;
}
});

To replace newlines with html breaks you split on newlines and then join the array with html breaks:
themehtml.split("\n").join('<br>')

So I used the $.each function like so...
$.each(themehtml, function(){
var grad = $("._grubber_blog_customize").html();
$("._grubber_blog_customize").html(grad+this+"<br />");
});
This will gradualy add the striped html code to the div and make it look like its line by line

Related

Add a space between each character, but in a method

Hey :) I know a similiar question was asked before, but i just cant get it through. I want to create a method called something like makeMeSpaces, so my h2 text will have a space between each character.. and i might want to use it elsewhere aswell. I have this until now, from the logic point of view:
var text = "hello";
var betweenChars = ' '; // a space
document.querySelector("h1").innerHTML = (text.split('').join(betweenChars));
it also works pretty fine, but i think i want to do
<h2>Hello.makeMeSpaces()</h2>
or something like this
Thank you guys!
If you really want this in a 'reusable function,' you'd have to write your own:
function addSpaces(text) {
return text.split('').join(' ');
}
Then, elsewhere in code, you could call it like so:
var elem = document.querySelector('h2');
elem.innerHTML = addSpaces(elem.innerHTML);
Maybe this is what you want , not exactly what you showed but some what similar
Element.prototype.Spacefy = function() {
// innerText for IE < 9
// for others it's just textContent
var elem = (this.innerText) ? this.innerText : this.textContent,
// replacing HTML spaces (' ') with simple spaces (' ')
text = elem.replace(/ /g, " ");
// here , space = " " because HTML ASCII spaces are " "
space = " ",
// The output variable
output = "";
for (var i = 0; i < text.length; i++) {
// first take a character form element text
output += text[i];
// then add a space
output += space;
};
// return output
this.innerHTML = output;
};
function myFunction() {
var H1 = document.getElementById("H1");
// calling function
H1.Spacefy();
};
<h1 id="H1">
<!-- The tags inside the h1 will not be taken as text -->
<div>
Hello
</div>
</h1>
<br />
<button onclick="myFunction ()">Space-fy</button>
You can also click the button more than once :)
Note :- this script has a flow, it will not work for a nested DOM structure refer to chat to know more
Here is a link to chat if you need to discuss anything
Here is a good codepen provided by bgran which works better

WKWebView and InnerText with newline

I am currently working on implementing a web view inside of my iOS application using Xamarin. My webView is a WkWebView. My issue is that any time the text I am passing in has a new line it fails to display. However, testing my function in my browser (chrome) along with Safari I see that it executes just fine. I did some searching and I also tried to replace the \n character with \r\n, but that did not solve my issue. What am I missing?
C#:
private void BuildText(FormEntries entry, FormResponseAnswers formAnswers) {
string function = "buildText('" + entry.Text + "', '" + formAnswers.Answer + "');";
var javaScriptCmd = (NSString)function;
webView.EvaluateJavaScript(javaScriptCmd, null);
}
formAnswers.Answer that is causing the issue is:
"Hello world from the device, I do not know how well this will display our data at all. But we will see how this works. I wonder, if I were to add enter keys will it work?\n\n\nI kinda doubt it. ";
JS:
function buildText(entryText, answer) {
var answerAreaDiv = document.getElementById('answerArea');
var holder = document.createElement('div');
holder.classList.add('holder');
var entryLabel = document.createElement("label");
entryLabel.textContent = entryText + ':';
var answerLabel = document.createElement("label");
answerLabel.innerText = answer;
holder.appendChild(entryLabel);
holder.appendChild(answerLabel);
answerAreaDiv.appendChild(holder);
}
HTML:
<body>
<div id="answerArea">
</div>
</body>
HTML elements don't line break unless you explicitly ask them to; line breaks such as \n are treated as spaces. Try inserting HTML instead, so that you can replace your newline with a <br>:
answerLabel.innerHTML = answer.replace(/\n/g, '<br>');
Example:
document.body.appendChild(document.createElement('label')).innerHTML = `first line
second line`.replace(/\n/g, '<br>');

How to replace a html tag in js?

I have a string in which there are continous occurances of a font tag
<font color="blue">DATA ENTRY</font>
and in some cases like this
<font class="beat">DATA ENTRY</font>
I want to replace the 2 tags with
So that it looks like this
<p>DATA ENTRY</p>
I tried this ,can anyone please suggest me help.Thanks.
text = text.replace('<font [^"]*>',<p>).replace('</font>','');
block.outerHTML = "<p>" + block.innerHTML + "</p>"
where block is any HTML block
it just left to select it correctly with:
var block = document.querySelector(".selector");
If you want to stick with your simple string manipulation, you need to use regular expressions and correct the replacements in your replace calls:
text = text.replace(/<font[^>]*>/g,'<p>').replace(/<\/font>/g,'</p>');
Since you just need to replace the string you can do this with just one replace statement.
text = text.replace(/<(\/*)font[^>]*>/g, '<$1p>');
If you using jQuery with replaceWith
$('font').replaceWith('<p>DATA ENTRY</p>');
First of all the font tag is deprecated and should not be used.
Get an array of the tags you want to replace.
var elems = document.getElementsByTagName('font');
Go through loop and replace old HTML with new HTML
for (var i = 0; i < elems.length; i++)
{
var target = elems[i].innerHTML;
elems[i].innerHTML = target.replace(/(<p)/igm, '<font').replace(/<\/p>/igm, '</font>');
}
Note: This is not tested but should work.
Try like this :
$('font').contents().unwrap().wrap('<p/>');
In javascript, you can do something like this :
var str="<font>hello world</font>";
str = str.replace(/<font>/, "<p>");
str = str.replace(/<\/font>/,"</p>");

Applying CSS on a subString using DOM

Here is the JS code in which I am splitting a String using ":" . So a String given by:
Habit #1: Have you established dedicated business checking account(s)?
Would split into:
[0]=Habit #1
and
[1]=Have you established dedicated business checking account(s)?
Now I want to apply CSS to [0].
titles=document.getElementsByClassName("title");
for(var i=0;i<titles.length;i++){
titles[i].innerHTML.split(":")[0].style.cssText="color:aqua;";
}
Any modification you guys suggest to the existing code?
You can replace the fist part of the string like so:
var titles=document.getElementsByClassName("title");
for(var i=0;i<titles.length;i++){
var blueFoo = titles[i].innerHTML.split(":")[0];
var text = titles[i].innerHTML;
var newHTML = text.replace(blueFoo,'<span style = "color:blue">' + blueFoo + '</span>');
titles[i].innerHTML = newHTML;
}
For example:
var titles=document.getElementsByClassName("title");
titles= "<span>" + titles;
titles=titles.replace(":", ":</span">);
document.getElementsByClassName("title").innerHtml = titles;
I think this could work.
I think you have to wrap the first characters to the ":" with a <span class=""> and give them a css class.
<p><span class="blue">Habit #1:</span> Have you ... </p>
Mike

How to extract all hyperlink titles from big html string using javascript?

I got an HTML string as :var code; I want to extract all hyper link title values in this big string and place them in textarea. I tried the following but it never works. could any one tell me what i am doing wrong?
sample hyperlinks to look for(i want to extract mango,cherry,...) :
mango
cherry
my code string has blocks of data like below:
<div class="details">
<div class="title">
mango
<span class="type">3</span>
</div>
</div>
full code:
$.getJSON('http://anyorigin.com/get?url=http://asite.com/getit.php/&callback=?', function(data){
//$('#output').html(data.contents);
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
var start = siteContents.indexOf('<ul class="list">');
var end = siteContents.indexOf('<ul class="pag">', start);
var code = siteContents.substring(start, end);
document.myform2.outputtext2.value = code ;
var pattern = /<a href="([^"]+?)">([^<]+?)<\/a>/gi;
code = code.match(pattern);
for (i = 0; i < code.length; i++) {
document.write($2<br />'));
}
});
</script>
It looks like you're trying to parse HTML with regex. This post has some more info on that topic.
Since this question is tagged as jQuery, you could try something like the following...
Make a jQuery object out of the returned HTML:
$markup = $(data.contents);
Find the anchors:
$anchors = $markup.find('a');
Get the text (or whatever attribute you want from it):
arrText = [];
$anchors.each(function() {
arrText.push($(this).text());
});
Put result into textarea:
$textarea.val(arrText.join(','));
To achive this jquery is the simplest solution, you can try below code
$('a').each(function(){
var copiedTitle = $(this).html();
var previous = $('#test').html();
var newText = previous +"\n"+ copiedTitle;
$('#test').html(newText);
});
JS Fiddle

Categories