0
175
ViewsGet a span element without the leading space IF it is being displayed as the first element on a line
I have a div that wraps a number of spans each with a single word in them. Most of these spans have a leading space, but if they wrap to another line, the space doesn't show.
IF the span is currently displaying a word/element that is the first word of a line, I would like to get that element without the space. However, if the element is displaying the space I want to get the element with the leading space.
In this example, the words 'The', 'Example' and 'You' all start on a new line and the leading space doesn't show.
One thought I had was to do a regex for a new line indicator and if there is one, to remove the leading space, but not sure that is the ideal way to handle it.
My ultimate goal is to get the exact position and size of the span and the text within it. I am finding, however, that when I do this, I am getting the leading spaces even when they aren't being shown. If I could ONLY get the text, size and position and completely leave all of the spaces out of the question, I am fine with that too.
Here is an image showing that the word "example" and "you" both are showing without an initial space due to the wrapping.
So, after I run my .each function on the div in question I would want the following data:
This
is
an
example
for
you
to
examine
jQuery('.test').each(function(index, value) {
var theword = jQuery(this).text();
console.log("The Word "+theword);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="width:100px" class="test">
<span>This</span>
<span> is</span>
<span> an</span>
<span> example</span>
<span> for</span>
<span> you</span>
<span> to</span>
<span> examine</span>
</div>My ultimate goal is to accurately get size and positioning data of each span word.
1 answers
Answer question0
Not sure sure what exactly you're trying to achieve but this loops through the spans and shows if it has a space and returns true or false and also the position in the loop.
Is this what you need or do you want the span before or after it? Not quite clear? Also get the size of what? Sorry but your question is not quite clear.
var count = 0;
function hasWhiteSpace(s) {
return (/\s/).test(s);
}
var reWhiteSpace = new RegExp("\\s+");
$(".test span").each(function(){
var test = $(this).text();
var result = (hasWhiteSpace(test));
count++;
if (result === true) {
console.log(test + ', HAS a space at position : ' + count);
} else {
console.log(test + ', has NO space at position : ' + count);
}
if (count === 1) {
alert ('*'+ test + '*' + ' is the first word with a without a space in the spans');
}
});<script src="https://code.jquery.com/jquery.js"></script>
<div style="width:100px" class="test">
<span class=test">This</span>
<span class=test"> is</span>
<span class=test"> an</span>
<span class=test"> example</span>
<span class=test"> for</span>
<span class=test"> you</span>
<span class=test"> to</span>
<span class=test"> examine</span>
</div>