I'm trying to figure out, that how to remove the double spaces which are placed in-between texts in the HTML Text field.
[For example: Tom and Jerry - in here, after "Tom" there are two spaces are placed].
I need to remove or replace the double spaces and place a single space only while keying in the HTML text box. Any Help on this? ... Thanks
You might add a keyup listener, which, when triggered, uses a regular expression to replace all double-spaces (or more) with single spaces:
const input = document.querySelector('input');
input.addEventListener('keyup', () => {
input.value = input.value.replace(/ +/g, ' ');
});
<input>
Related
I have a script like below,
var content = "<p>Please click on the text below.<br><a "href="www.testifyme.com">More Info</a></p>"
Html,
<span [innerHtml]="content"></span>
Here the problem is with my anchor tag,how to add href value in double quotes since the "<a href:"www.....>
Here I am getting error at href.Can anyone please help me.Thanks.
You can escape the " like so: \" or you can use single quotes ' within the double ones for a href or classes
When i have just entered the job, I usually put them in single quotes or concat strings
var content = '<p>Please click on the text below.<br>More Info</p>'
I have known to use slash, later
var content = "<p>Please click on the text below.<br>More Info</p>"
When i have known ES6, i use ```
var content = `<p>Please click on the text below.<br>More Info</p>`
The problem is in your javascript variable.
You have two bugs.
The first one is the double quotes before href those are not needed.
The other problem is the quotes for the actual link, that is causing a syntax error, since javascript thinks you are closing the string variable.
You have several options to fix that.
Use single quotes for the string variable:
var content = '<p>Please click on the text below.<br>More Info</p>';
Note the first and last quotes are single quotes.
Or to escape the double quotes using the escape character \
var content = "<p>Please click on the text below.<br>More Info</p>";
A third option (I would not personally recommended it for this specific case, but I included it for reference) could be to use template literals with the ` character:
var content = `<p>Please click on the text below.<br>More Info</p>`;
Not the first and last are backticks `
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
For
<myDIV id="myInput" contenteditable="true"></myDIV>
I want to set "abcdefg " with a space behind.
Doing this
var myInputDIV = document.getElementById("myInput");
myInputDIV.innerHTML = "abcdefg "; //does not work
myInputDIV.textContent = "abcdefg "; //does not work
How to make sure that I get the space behind? Currently, the string shown in the div is just "abcdefg", without the space.
Thanks.
You can add space in html in on of the following ways:
add as a space sign
add as a space sign
Types of Spaces in HTML
Creates four spaces between the text-
Creates two spaces between the text -
Creates a regular space between the text -
creates a narrow space ( similar to regular space but slight different) -
spacing between sentences - </br>
This link might help you. Check out the link here
SENTENCE SPACING IN HTML AND CSS
I am trying to give link to phone numbers in a page using javascript. SO Post
is helpful but it also update contents in input box, href, src etc. How to update phone numbers that are not tag attribute and text inside <a> tag
var regex = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/g;
var text = $("body:first").html();
text = text.replace(regex, "$&");
jsfiddle
Since you need to update phone numbers that are not tag attributes and not the content inside an anchor tag, you can change the regexp to use negative lookahead.
This would be the regex -
((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}(?!([^<]*>)|(((?!<a).)*<\/a>))
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Modified part
Explaining the regex -
The first part of the regex is the same.The second part is a negative lookahead. If the regexp inside the (?! ) matches, then that is not the required string. So we need to match the tag attributes and the innerHTML of anchor tag.
For values inside tag attributes, this is the regexp
([^<]*>)
For content in anchor tag -
(((?!<a).)*<\/a>)
Placing both the regexps above inside the negative lookahead allows you to negate the strings that the above match.
It seems to work in this Fiddle.
You can check the matches for the regex here.
var regex = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/g;
var text = $("body:first").text();
text = text.replace(regex, "$&");
$("body:first").html(text);
please try this
demo: http://jsfiddle.net/PShYy/34/
Check this out: http://jsfiddle.net/PShYy/35/
// match every element in body, go to its contents
$("body:first").find('*').contents().filter(function(){
//if it's a text node, if its value matches the regex an it's not a child of an anchor
if(this.nodeType == 3 && regex.test(this.nodeValue) && this.parentElement.tagName !== "A"){
// create an anchor
var anchor = document.createElement('a');
// set its attribute to the phone number
anchor.setAttribute('href', this.nodeValue.match(regex)[0]);
// set the anchor's contents to be the same as its href attribute value
anchor.appendChild(document.createTextNode(this.nodeValue.match(regex)[0]));
// append it after the original text node
if(this.nextSibling)
this.parentElement.insertBefore(anchor, this.nextSibling);
else
this.parentElement.appendChild(anchor);
// remove the phone number from the original text node
this.nodeValue = this.nodeValue.replace(regex, '');
}
});
You could do it your way just by modifing the regex but if you replace the whole body with a new altered html, all the event listeners on your elements etc. will stop working.
When adding in text with small whitespace appended to it for alignment purposes the whitespace is trimmed off (the whitespace is added in c# so by the time it gets to front end Javascript it cannot be edited - it would be nice to just use some CSS to do this but it is not an option).
Here is what I tried so far:
var zlp = document.getElementById("testDiv")
zlp.innerHTML = "hello hello"
var zzz = document.createTextNode("hello hello")
zlp.appendChild(zzz)
<div id="testDiv"></div>
Both of which produce hello hello.
White space characters are usually collapsed in HTML (by default).
You can replace it with the entity:
var text = text.replace(/\s/g, ' ');
\s will match any white space character, such as space, tab and new line. If you only want to replace space, use / /g instead.
Other options which avoid string manipulation:
Put the text in a pre element.
Set the CSS 2 white-space property to pre as #Esailija pointed out. You can always add CSS properties dynamically to elements, they don't have to be specified in a style sheet.
use
zlp.innerHTML = "hello hello";
Like everyone else just said.
use a html tag 'pre'
Example:
<pre>
A line
A line with indent
</pre>
result:
A line
A line with indent
White space is collapsed in HTML. It's not a JS issue, the same would happen if you typed that manually in the HTML document. You need to replace the spaces with
zlp.innerHTML = "hello hello".replace( / /g, " " );
I would like to remove the initial space in a textarea. When there is no text given to a textarea and you get the textarea.value, you get a single space " " instead of the empty string like a normal input textbox.
Also when there is text (i.e. test) it returns " test". Is it possible to prevent this extra space?
I would prefer to work with the prototype of Textarea because I am using a general procedure to get the values of both input textboxes and textarea's.
For the moment I wrote something like this:
Textarea.prototype.value = function() {
var val = this.value;
if (val[0] == "0") val.splice(0,1);
return val;
};
But it doesn't solve the problem, I still get the extra space.
Your HTML should be like this:
<textarea></textarea>
---------^ no space, tab or new line there
Simply make sure that there is no space between opening and closing tags eg follwing are wrong:
<textarea> </textarea>
Or
<textarea>
</textarea>
Correct:
<textarea></textarea>
" \b" would result in "". So you could concatinate the string with \b to eliminate the last character of a string