Develop Reference

Replace space with character in a string except for words between quotes with JQuery

In my web application I implemented a search functionality with a textbox and buttons with a jQuery onclick event handler attached. Each button triggers a different search handler.
HTML
<input id="searchText" placeholder="What are you looking for?" type="text" />
<div id="searchLinksBar">
All
Downloads
Knowledge Base
</div>
jQuery
"use strict";
$(document).ready(function() {
$("#searchLinksBar a").click(function() {
//Get content from the selected anchor
var categoryURL = $(this).attr("href");
//Get search string
var searchText = $("#searchText").val();
var searchString = ToQueryString(searchText);
//Check if the search bar is filled
if(searchString.trim()){
categoryURL = categoryURL + "&str="
}
//Attach the two strings to get our full URL
var searchUrl = categoryURL + searchString;
window.location.href = searchUrl;
return false;
})
});
function ToQueryString(text) {
return text.replace(/ /g, "+");
}
The search works great except when a user wants to search an exact phrase by including several words within quotes. There shouldn't be the '+' sign between words within quotes, otherwise the handler does not work as expected. I might think of a solution by using regular expressions or use the concat and split function (see below) to divide words within quotes from those with quotes and place in a array but maybe there is a more elegant solution
var phrases = [].concat.apply([], text.split('"').map(function(v,i){
return i%2 ? '"'+v+'"' : v.split(' ')
})).filter(Boolean);

How to display <input type=''text'> without creating a textbox in jquery?

I have a comment box(textarea) in which the user types something and when he hits enter that thing is automatically displayed in 'comment section'. Now when the user hits submit I'm executing the following code,
var comment = $("#commentBox").val();
var commentSection = $("#commentSection");
comment.appendTo(commentSection);
By the above code the comment typed by user is dynamically displayed in the commentSection. This works fine but when user types something like,
<input type='text'>
in the comment box then a textbox is created within the comment section. So is there a way through which I could not let this happen?
Thanks in advance.

One way would be to just append the data as .text
Something like this:
var comment = $("#commentBox").val();
var commentSection = $("#commentSection");
commentSection.text(comment);
Edit: To append to an existing part of the comment, replace:
commentSection.text(comment);
with:
commentSection.text(commentSection.text() + comment);

You have to convert the string to entities. Define this function:
function htmlencode(str) {
return str.replace(/[&<>"']/g, function($0) {
return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
});
}
Then run the following code when the user hits enter:
var comment = htmlencode($("#commentBox").val());
var commentSection = $("#commentSection");
comment.appendTo(commentSection);

Try this ,
div.insertAdjacentHTML( 'beforeend', comment);

You can use
var commentText = $("#commentBox").text();
but this do not clean html tags on your string, additionally you can use a function to do this
function RemoveHTMLTags(vals) {
var regX = /(<([^>]+)>)/ig;
var html = vals;
return (html.replace(regX, ""));
}
and then you use:
var finalComment = RemoveHTMLTags(commentText);

Remove HTML tags from a javascript string

I have this code :
var content = "<p>Dear sms,</p><p>This is a test notification for push message from center II.</p>";
and I want to remove all <p> and </p> tags from the above string. Just want to display the string values without html tags like :
"Dear sms, This is a test notification for push message from center II."

Why not just let jQuery do it?
var content = "<p>Dear sms,</p><p>This is a test notification for push message from center II.</p>";
var text = $(content).text();

Here is my solution ,
function removeTags(){
var txt = document.getElementById('myString').value;
var rex = /(<([^>]+)>)/ig;
alert(txt.replace(rex , ""));
}

Using plain javascript :
content = content.replace(/(<p>|<\/p>)/g, "");

You can use jQuery text() to get plain text without html tags.
Live Demo
withoutP = $(content).text()

var content = "a<br />";
var withoutP = $(content).text()
alert(withoutP )
This one does not work for the .text() solution.

this one is checking for special chars
var $string = '<a href="link">aaa</a>';
var $string2 = 'aaa';
var $string3 = 'BBBBB';
var $string4 = 'partial<script';
var $string5 = 'has spaces';
function StripTags(string) {
var decoded_string = $("<div/>").html(string).text();
return $("<div/>").html(decoded_string).text();
}
console.log(StripTags($string));
console.log(StripTags($string2));
console.log(StripTags($string3));
console.log(StripTags($string4));
console.log(StripTags($string5));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

myString.replace(/<[^>]*>?/gm, '');

Place hidden element in markup, or create it from jQuery. Use this code to get plain text without complications with incomplete tags, < etc.
content = $(hiddenElement).html($(hiddenElement).html(content).text()).text();

Above approch is not working for me. so i got one alternative solution to solve this issue`
var regex = "/<(.|\n)*?>/";
var originaltext = "1. Males and females were compared in terms of time management ability. <br><br>The independent variables were the people in the study.<br><br> Is this statement correct";
var resultText = body.replace(regex, "");
console.log(result);

Use regex:
var cleanContent = content.replace(/(<([^>]+)>)/ig,"");

you can use striptags module to remove HTML and get the text. It's quite an easy and straightforward solution.

function htmlTagremove(text) {
var cont = document.createElement('div'),
cont.innerHTML=text;
return $(cont).text();
}
htmlTagremove('<p><html>test');

JavaScript: Find & replace a part of URL without refresh, HTML5 history.replacestate

I have an URL like this:
http://site.com/images/961b7d0e50f0462a8828d31bf0874a71/lightbox
I need to string.format replace the GUID in the URL with another GUID from the Array (next or previous) without refresh on click event.
HTML:
<a id="replaceGUIDnext">Replace GUID to previous in Array</a>
<a id="replaceGUIDprevious">Replace GUID to previous in Array</a>
SCRIPT:
var guids = ['3ffffb5fb7424c3d96f361fc18a753e0', '961b7d0e50f0462c8828c31bf0874a71', '62a96a75f4764c9ea3d9b65a47dce53d'];
var baseURL = http://site.com/images/{1}/lightbox
$('#replaceGUIDnext').click(function(){
...something goes here
});
$('#replaceGUIDprevious').click(function(){
...something goes here
});
Notice {1} which should be replaced with string.format.
I'd like to use HTML5 history.replacestate. If the browser doesn't support it, it should ignore the replace (or fail-back to a working solution).

JavaScript does not have string.format so just use replace.
function changeIt( guid ) {
if( history.replaceState ) {
var newUrl = baseURL.replace("{1}", guid);
history.replaceState( { "guid" : guid}, guid, newUrl );
}
}

How to include javascript generated text into html link?

I have a javascript that displays a generated text into a div:
document.getElementById('phrase').innerHTML = phrase;
PHRASE_TEXT_GETS_SHOWN_HERE
Basically I'm trying to set up a link that will take the text and post it to twitter with a link:
Clicky for tweety
How can I include the generated text in the link?

Do you mean like:
function setPhrase(phrase) {
var url = 'http://twitter.com/home?status=' + encode(phrase);
$('#phrase').html('' + phrase + '');
}
...?
Un-jQuerying it should be straightforward enough, if that's how you roll.
This is un-jQueried:
function setPhrase(phrase) {
var url = 'http://twitter.com/home?status=' + encodeURI(phrase);
document.getElementById('phrase').innerHTML = '' + phrase + '';
}
If you didn't see my failbraining encode for encodeURI as an error you should use Firebug. It may also fail if you have more than one element with the id phrase or if you have no elements with the id phrase.