I have an html element that contains other elements (a, span) which contain text like "this is a text". As some words are inside a or span or both the result of jqueries text() is something like " this\n is a\n text ". I'm not interested in all those whitespace. I just want to test if "this is a text" is the readable text in the element.
I could workaround this by using regex, e.g. assert.ok(string.match(/^\s*this\s+is\s+a\s+text\s*^/)) but this is kinda ugly plus I'd loose the "expected: ... , result: ...." stuff in the test report. Is there a better way to test the text contents of html elements with qunit/jquery?
Update:
There seems to be no other way/convenience method in qunit to solve that, except for manually messing with the whitespaces like in https://stackoverflow.com/a/27779636/1250436
You can remove extra spaces by following code.
string = " this is a text ";
string = string.replace(/[\t\n\s]+/g, " "); //For removing space,tab and new line
alert(string);
Related
here is my code:
function myFunction() {
var str = " Hello World ";
document.getElementById("demo").innerHTML=str;
alert(str);
}
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
While the Alert window outputs the string as it is i.e with spaces, the p element receives the string in trimmed form i.e with no spaces?
In HTML, regular whitespace chararacters between tags are not interpreted as whitespaces to render by the browser.
Declaring one or multiple of them will give the same result: they are collapsed and are rendered as a single space.
To render multiple whitespaces, you have two ways :
in plain HTML use the entity ( , or non-breaking space)
in CSS, use the white-space property: white-space: pre-wrap;
pre-wrap
Sequences of whitespace are preserved. Lines are broken at newline
characters, at <br>, and as necessary to fill line boxes.
Source: MDN’s article on white-space
It is not the innerHTML. Real culprit is Browser. You cannot see the spaces in the browser directly with string literals as all browsers will always truncate spaces in HTML. You have use   to see them.
While browser processing your html, it follows some rules.
Here is the 16.6.1 The 'white-space' processing model
If 'white-space' is set to 'normal', 'nowrap', or 'pre-line',
every tab (U+0009) is converted to a space (U+0020)
any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has 'white-space' set to 'normal', 'nowrap' or 'pre-line' — is removed.
If you would like to see those whitespaces, you could use CSS's white-space property and set it to pre (which breaks only on given line-breaks) or pre-wrap (which breaks whenever necessary).
However are you sure, that you really want to do positioning of text in HTML? Is there any reason that you leave the spaces and instead use padding on your element to shift its content?
It depends on the browser.
If you wanna be sure to have the space, do this:
function myFunction() {
var str = " Hello World ";
document.getElementById("demo").innerHTML=" " + str + " ";
alert(str);
}
myFunction();
how do I remove line breaks or empty lines that appear after a certain text in a textarea box. I tried something like this:
$('#mytextarea').val($('#mytextarea').val().replace('some_Text' + "\n", ''));
But that didn't work
var newVal = $('#mytextarea').val().replace(/some_Text[\r\n]+/, 'some_Text')
I found this regex JavaScript line breaks
$('#mytextarea').val($('#mytextarea').val().replace(/(\r\n|\n|\r)/gm,""));
I'm just concentrating on the regexp part of the question:
Sample Text and Replacement Code
"some texts are better than others, some_text\nsome_text\r\nsome_text\rok? some_text"
.replace(/(some_text)[\r\n]+/g, '')
Result
"some texts are better than others, ok? some_text"
I had some help on here to create this:
http://jsfiddle.net/spadez/ZTuDJ/38/
My problem comes from the fact that html is stripped out when putting the value of the responsibility field into the text area, but when adding it to the list it still has the HTML on. That means that if someone types in this:
<b>Testing</b>
When I type this in, I get this in the text area when it is stripped:
Testing
But in the list it still has the html tags so it looks like this:
Testing
This is my code which puts it in the text are and the list:
$('#responsibilities').text($("<div>" + eachline + "</div>").text() ).before("<li>"+lines+"</li>");
My question: How do I put the same stripped value which goes into the text area also into the list.
$('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+"</li>");
Demo ---> http://jsfiddle.net/ZTuDJ/40/
I'm trying to use JS to replace a specific string within a string that contains html tags+attributes and styles while avoiding the inner side of the tags to be read or matched (and keep the original tags in the text).
for example, I want <span> this is span text </span> to be become: <span> this is s<span class="found">pan</span> text </span> when the keyword is "pan"
I tried using regex with that ..
My regex so far:
$(this).html($(this).html().replace(new RegExp("([^<\"][a-zA-Z0-9\"'\=;:]*)(" + search + ")([a-zA-Z0-9\"'\=;:]*[^>\"])", 'ig'), "$1<span class='found'>$2</span>$3"));
This regex only fails in cases like <span class="myclass"> span text </span> when the search="p", the result:
<s<span class="found">p</span>an class="myclass"> s<span class="found">p</span>an text</s<span class="found">p</span>an>
*this topic should help anyone who seeks to find a match and replace the matched string while avoiding strings surrounded by specific characters to be replaced.
As thg435 say, the good way to deal with html content is to use the DOM.
But if you want to avoid something in a replace, you can match that you want to avoid first and replace it by itself.
Example to avoid html tags:
var text = '<span class="myclass"> span text </span>';
function callback(p1, p2) {
return ((p2==undefined)||p2=='')?p1:'<span class="found">'+p1+'</span>';
}
var result = text.replace(/<[^>]+>|(p)/g, callback);
alert(result);
i have a div that contains some html and text (html is added dynamically)the structure would be like
<div id="contentContainer">
<span>ProductA</span> ; <span>ProductB</span>; prod
</div>
i want to remove the last incomplete text (prod) from the inner html of the div contentContainer on submit button click
for this i was using regex returnText.replace(/\w+$/, ''); and it works fine
as i can not trim the text to last index of ';'
but not the issue is when user puts some special charaters in the incomplete text as pr\od
the regex fails
so is there any solution to trim the last appended text the inner html of the div
or can i trim the text to the last html tag and place ; after that
please suggest any solution
if you are using jquery you can pull out all span elements and replace innerHTML with them.
$("#contentContainer").html( $("#contentContainer span") );
That should clean rest things. Maybe not the best but i think its better then regexp on content.
Solution looks at the last DOM node in DIV, if it is a text node it changes text to semi-colon
var lastNode = $('#contentContainer').contents().last()[0]
if (lastNode.nodeType == 3) {
lastNode.textContent=';'
}
demo: http://jsfiddle.net/EhcLh/