how to put multiple strings into a single string in jquery - javascript

<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
when ever I copy and paste the above code, I need to remove space between them i.e., ('/n' tag between them) by doing validations........ and it shouls look like this
<span class='st_twitter_large' displayText='Tweet'></span><span class='st_linkedin_large' displayText='LinkedIn'</span><span class='st_facebook_large' displayText='Facebook'></span>
How can I get it.....Any help would be greatly appreciated
Thanks in Advance

you don't need to use jQuery for that, you can to that by native replace method:
var myStr = "..."; //whatever string you have
myStr = myStr.replace(/\r?\n/g, "");
but I am not sure if this is really solves your problem, it looks like you trying to do something different, anyway the above code will remove all "carriage return" and "new line" characters from the string

Related

Create a line break in the text inside span

I am using the following HTML in the application:-
<span style="display:inline-block;white-space: pre-line">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana \n Grade:10th \n Teacher:Meeta"}</span>
But am not able to create line breaks in the text. I have also tried using \n,\r and br tag but nothing seems to break. The expected output is:-
I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana Grade:10th Teacher:Meeta"}
If data displayed in span contain the character \n and you can't modify it before display it in dom
you can use a simple js function to replace all \n occurence by <br/>
var span = document.getElementById('my-data');
span.innerHTML = span.innerHTML.replaceAll('\\n', '<br/>');
<span id="my-data">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana \n Grade:10th \n Teacher:Meeta"}</span>
just be careful to mastered dom modification when you replace innerHTML. here there is no risk but if you have based replace on user input you can have xss issue
use <br> instead of \n. Do you want output like this with a line break?
<span style="display:inline-block;white-space: pre-line">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana <br> Grade:10th <br> Teacher:Meeta"}</span>

Regex to strip html tag with certain attribute

I have some invalidly-nested HTML like:
<form class="form1" method="get">
<div>
<input name="field1">
</form>
<form class="form2" method="get">
<input name="field1">
</form>
</div>
Yeah, it's a mess, don't ask. The invalid nesting is causing problems somewhere else. jQuery I think is expecting a closing </div>, and only finding it at the last one. It's then treating the second <form> tag as invalid, and also discarding the closing </form> immediately above it, and assuming everything between lines 1 and 9 are one form.
If I output these to the console:
$('.form1).html() - all of line 1 - 9
$('.form2).html() - undefined
So what I'm trying to do is treat the whole thing as a string, and use regex to strip out form2. I'm expecting a regex something like:
formText.replace(/(<form\b[^>]*>)[^<>]*(<\/form>)/gi, "");
but I'm not sure how to reference the specific form with class=form2.
There's also a problem with it being a multi-line string.
Update: added more detail, outlining why jQuery's remove() method isn't working. jQuery only thinks there's one form unfortunately.
Don't use regex to parse HTML. Since you're using jQuery, just use .remove():
$(function() {
$(".form2").remove();
});
JSFiddle
I ended up using:
formText = formText.replace(/(<form\b[^>]*form2+.*>[\s\S]+<\/form>)/gi, "");
The [\s\S] matches all characters including \n and \r to cover the newlines.
I could probably have made the part of the regex dealing with the class name more specific so I knew it was the class and not some other random form with a similar, but in practice it didn't matter (there was only one instance of the 2nd form, with a very specific class name).

Change href in div to normal text

I have one problem. On my website, I have <div id="alpha_bravo">, with links inside. It looks like this:
<div id="alpha_bravo">
<p>text text text link</p>
</div>
I want change every <a href...> to funny text like suprise, as an example.
How can I do it?
Since you tagged the question with PHP and from the comments below the question it seems that you may want to use server-side functionality, I'm going to give an example using PHP.
One way is to replace only links. You are looking for preg_replace() function that will replace all substrings in the string based on a regex pattern.
$input = "<div id='alpha_bravo'><p>text text text <a href='...'>link</a> and <a href='...'>another link</a></p></div>";
$output = preg_replace("/<a (.*?)>(.*?)<\/a>/i", "surprise", $input);
You can also just remove all HTML tags in the string using strip_tags() function.
$input = "<div id='alpha_bravo'><p>text text text <a href='...'>link</a> and <a href='...'>another link</a></p></div>";
$output = strip_tags($input);
Given that this is coming from a database, first word of advice is that you filter your input before saving it in database.
Secondly, if you don't want those links to render and replace them with some other value then use PHP's function preg_replace() as already mentioned by PetrHejda..
PHP docs: http://php.net/manual/en/function.preg-replace.php
Your <a ...>...</a> pattern may differ if users insert styling and classes.
Try using this pattern as your solution: preg_replace("/<a(.+?)href=\"(.+?)\"/", "<a$1href=\"your_value_here\"", $yourStringHere);
You may use g or i flags. Start here with regular expressions: http://www.regular-expressions.info/.

Javascript quote escape giving bugs

I need to print a button to a div that would pass a variable MyVar(string), or, to be precise, it's value, as a parameter to a function addfr(). The code:
document.getElementById("somediv").innerHTML="<button onclick=\"addfr(\""+MyVar+"\")\">Add as friend</button>";
Instead of the expected
<button onclick="addfr("MyVar")">Add as friend</button>"
I get:
<button onclick="addfr(" MyVar")"="">
What is happening here? Any ideas how to fix this?
Edit: The final solution is, for those interested:
<button onclick=\"addfr(""+MyVar+"")\">Add as friend</button>
It needs to be HTML escaped. Try using " in place of \".
You can use single quotes instead:
document.getElementById("somediv").innerHTML="<button onclick=\"addfr('"+MyVar+"')\">Add as friend</button>";

How can I use a multiline value for an HTML tag attribute? (i.e. how do I escape newline?)

How do I include a newline in an HTML tag attribute?
For example:
<a href="somepage.html" onclick="javascript: foo('This is a multiline string.
This is the part after the newline.')">some link</a>
Edit: Sorry, bad example, what if the tag happened to not be in javascript, say:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
Edit 2: Turns out the newline in the string wasn't my problem, it was the javascript function I was calling. FWIW, "
" can be used for newline in an HTML attribute.
From what I remember about the HTML standard, character entities work in attributes, so this might work:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
I'm not sure if the "newline" you want ought to be
(\n) or
(\r\n), and I'm not sure if browsers will interpret it the way you want.
Why do you need it? What specific problem are you trying to solve by adding a newline in an HTML tag attribute?
To include a multiline value, just continue the text of the html attribute on the next line in your editor e.g.
<input type="submit" value="hallo
hallo">
will put the second hallo under the first
As a general rule newlines in attributes are preserved so your second example would work fine. Did you try it? Can you give a specific example where you are having problems with it?
As test take a look at this:-
<a href="somepage3.html" onclick="javascript: alert(this.getAttribute('thing'))" thing="This is a multiline string.
This is the part after the newline.">some link</a>
The alert include the newline in the attribute.
<a href="somepage.html" onclick="javascript: foo('This is a multiline string. \
This is the part after the newline.')">some link</a>
Javascript needs a backslash at the end of the new line in a string.
i'm not certain, but you can try \r or \n
javascript: foo('This is a multiline string.\rThis is the part after the newline.')
or
javascript: foo('This is a multiline string.\nThis is the part after the newline.')
Usually, line breaks in HTML source code display what you intended in the result.
(Depends on the editor of course)
Since it's in Javascript, you would use "\n" if inside double-quotes (not positive about single-quotes, I've been in PHP a lot lately.
Honestly, it's worth mentioning that you should use Events and a delegator instead of placing a javascript event directly on the element.

Categories

Resources