Please find updated code
<html>
<title>css</title>
<head>
<style>
#st {
z-index: -114;
margin-right: -80px;
}
</style>
</head>
State Code : <span><span id="st"></span>Maharashtra - MH</span>
</html>
I got below output but i need clear overlapped text
enter image description here
the only way to approach this is using css display: none or visibility: hidden property , either one would work, i would advice display none. this is the only way CSS and HTML can hide data.
<span>State Code: <span id="st"><span style="display: none">Maharashtra - </span>MH</span></span>
You Can't do this by using CSS only here is the javascript solution for u
$("#st").html(function(){
var text= $(this).text().trim().split(" ");
var first = text.shift();
return (text.length > 0 ? "<span class='hide'>"+ first + "</span> " : first) + text.join(" ");
});
.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>State Code: <span id="st">Maharashtra - MH</span></span>
see this is HTML version but it is working fine.
<span id="span_Id">Maharashtra - MH</span>
<script>
function getSecondPart(str) {
return str.split('-')[1];
}
var span_Text = document.getElementById("span_Id").innerText;
var html = getSecondPart(span_Text);
document.getElementById("span_Id").innerHTML = html;
</script>
Update 2
Layout has significantly changed...see 2nd updated demo.
Since OP has dynamically generated text, JavaScript is needed realistically. And probably the actual text will be more than one on the page.
This demo gathers all <span> nested within a <span> (could've used #id but realistically, it should be a .class). This NodeList is converted into an array.
This array is then map()'ped on each iteration a regex is matched vs. the <span>s text.
A replace()'ment of the unwanted portion of text is overwritten and the last 2 letters remain.
Demo
var tgt = Array.from(document.querySelectorAll('span'));
tgt.map(function(s, idx) {
var str = s.textContent;
var rgx = /(State Code:).*?- (\w\w)/g;
var rep = `$1 $2`;
var res = str.replace(rgx, rep);
s.textContent = res;
});
<span>State Code: <span class="st"></span>California - CA</span><br>
<span>State Code: <span class="st"></span>New York - NY</span><br>
<span>State Code: <span class="st"></span>Oregon - OR</span><br>
<span>State Code: <span class="st"></span>Mississippi - MS</span><br>
If you use PHP... try it below..
$string = explode("-","Maharashtra - MH");
<span>State Code: <span id="st"><span style="display:none;"><?php echo $sting[0]."-"; ?></span><?php echo $string[1]; ?></span></span>
Related
I'm building a book-like pagination style for my website. It is composed of a 4 parts code: the text supposed to be displayed, the pages numbered, the "next" and "previous" buttons and the script to determine which part/page of the text is displayed.
var current = 1;
var totalPages = document.getElementById("pageContainer").childElementCount;
function showPages(id = 1) {
if (id < 1 || id > totalPages)
return;
curr_page = document.getElementById("page" + current);
curr_page.classList.add("pageHidden");
curr_page.classList.remove("pageDisplayed");
target_page = document.getElementById("page" + id);
target_page.classList.add("pageDisplayed");
target_page.classList.remove("pageHidden");
current = id;
}
.pageHidden
{
display: none;
}
.pageDisplayed
{
display: block;
}
<div id="pageContainer">
<div class="pageDisplayed" id="page1"><p>page 1 displayed</p></div>
<div class="pageHidden" id="page2"><p>That is the second page.</p></div>
<div class="pageHidden" id="page3"><p>And finally a third one.</p></div>
</div>
<h2>pages :
1
2
3
</h2>
<h2>
<span style="float: left;">
Previous
</span>
<span style="float: right;">
Next
</span>
</h2>
Now, I'd like to mark the actual page that is being displayed by changing the appearance of the link. For now it shows
"Pages: 1 2 3"
And I'd like it to become, for example:
"Pages: 1 [2] 3" (with a different color for the marked "[2]".
I've found ways to do that, but I couldn't make it works with the "next" and "previous" button, which, when triggered, didn't highlight the anchor number.
Basically, if the function showPages returns "page2", the anchor "2" with the id "2" should appear like that: [2].
I think it means that I have to compare the id from the page container, to the id from the pagination part... Anyone know how I can do that?
Same As you are hiding previous block and showing new block. create a css class with following css:
.page:before{
content: '['
}
.page:after{
content: ']'
}
this css will wrap any element with page class in brackets [].
Now add page class to selected page and remove from older one.
pageNum = document.getElementById("" + id);
pageNum.classList.add("page")
pageNum = document.getElementById("" + current);
pageNum.classList.remove("page")
Here is your working code.
var current = 1;
var totalPages = document.getElementById("pageContainer").childElementCount;
function showPages(id = 1) {
if (id < 1 || id > totalPages)
return;
curr_page = document.getElementById("page" + current);
curr_page.classList.add("pageHidden");
curr_page.classList.remove("pageDisplayed");
target_page = document.getElementById("page" + id);
target_page.classList.add("pageDisplayed");
target_page.classList.remove("pageHidden");
pageNum = document.getElementById("" + id);
pageNum.classList.add("page")
pageNum = document.getElementById("" + current);
pageNum.classList.remove("page")
current = id;
}
.pageHidden
{
display: none;
}
.pageDisplayed
{
display: block;
}
.page:before{
content: '['
}
.page:after{
content: ']'
}
<div id="pageContainer">
<div class="pageDisplayed" id="page1"><p>page 1 displayed</p></div>
<div class="pageHidden" id="page2"><p>That is the second page.</p></div>
<div class="pageHidden" id="page3"><p>And finally a third one.</p></div>
</div>
<h2>pages :
1
2
3
</h2>
<h2>
<span style="float: left;">
Previous
</span>
<span style="float: right;">
Next
</span>
</h2>
Here you go..
I have below span tag generated by custom tool (I can't ask it to generate in different way)
<span tabindex="0" > FINDME </span>
I want to write a script section within and to find the text "FINDME" and replace this with :
<span tabindex="0" style="color:red">FINDME</span>
or
<span tabindex="0">
<font color="red"> FINDME </font>
</span>
Basically I want to get the text colored. Also since I would have multiple span element coming that way so I had to search by text before replacing it.
I don't know how to code it so any help will be appreciated.
thanks !
This code will search for all the spans in your code and the one that have the text " FINDME " will get the color replaced. This solution is using jQuery
$(document).ready(function(){
$("span").each(function(){
if($(this).text() == ' FINDME '){
$(this).css('color','red');
}
});
});
https://jsfiddle.net/wearetamo/mdwkakzz/
The answer is :
<script> var span3 = document.querySelector('#dashboard_page_3_tab span'); span3.innerHTML = '<font color="red"> FINDME </font>' ; </script>
I have a block of text wrapped in spans that I need to split into an array.
So currently I have
var s = `
<span class="hoverable">c</span>
<span class="hoverable">o</span>
<span class="not-hoverable">o</span>`;
I need
var s = [
"<span class="hoverable">c</span>",
"<span class="hoverable">o</span>",
"<span class="not-hoverable">o</span>"];
I've tried s.split(/<\/?span>/); to split accounting for <span> and closing </span> but
var s = [
"<span class="hoverable">c",
"<span class="hoverable">o",
"<span class="not-hoverable">o",...]
So it's not including the closing span.
As always when a regexp question wanders over into HTML or XML territory, I suggest regexp is not the right tool. Use the proper HTML parser available in the language you are using. In case of JavaScript (implied by your use of var and string template syntax):
let s = `
<span class="hoverable">c</span>
<span class="hoverable">o</span>
<span class="not-hoverable">o</span>`;
let d = document.createElement('div');
d.innerHTML = s;
let result = Array.from(d.children).map(e => e.outerHTML);
console.log(result);
You can always use the DOM if you are working in a browser and the value is inside of an element. If it is not and you have a string then you can still use DOM dynamically. Finally, you can use regular expressions.
Here's a round up:
var s = ' ' +
'<span class="hoverable">c</span>' +
'<span class="hoverable">o</span>' +
'<span class="not-hoverable">o</span> ';
var r2 = s.match(/<span(.*?)>(.*?)<\/span>/gm);
console.log("using regular expressions");
console.log(r2);
function findWithDOM() {
console.log("using DOM");
var elements = [].slice.call(document.querySelectorAll('#myDiv span'));
console.log(elements);
}
function findWithDynamicDOM() {
console.log("using Dynamic DOM");
var element = document.createElement("div");
element.innerHTML=s;
var elements = [].slice.call(element.querySelectorAll('span'));
console.log(elements);
}
<div id="myDiv"><span class="hoverable">c</span>
<span class="hoverable">o</span>
<span class="not-hoverable">o</span>
</div>
<input id='btnFind' onclick='findWithDOM()' value='Find With DOM' type="button" />
<input id='btnFind' onclick='findWithDynamicDOM()' value='Find Dynamic DOM' type="button" />
This Meteor server code tries to extract the innerHTML from a html string using cheerio package but the error says that the elements has no method 'size'
What am I doing wrong and how to fix it? Thanks
here is the html;
<span class='errorMsg'>some text </span>
message: (html, typeMsg) => {
let $ = cheerio.load(html);
const selection = 'span.' + typeMsg;
const elements = $(selection);
return elements.size() > 0 ? elements.get(0).innerHTML.trim() : '';
}
After few trials and errors and trying to understand the docs, which cloud benefit from some more explanations.
Option 1
const element = $(selection).eq(0);
return element ? element.text().trim() : '';
Option 2
const element = $(selection).get([0]);
return element ? element.children[0].data.trim() : '';
I used option 1 in this case.
var cheerio = require('cheerio');
var $ = cheerio.load('<b>hello</b> world');
// innerHTML
$('body').html()
// <b>hello</b> world
// outerHTML
$.html($('body'))
// <body><b>hello</b> world</body>
// innerText
$('body').text()
// hello world
docs: https://api.jquery.com/html/#html1
My HTML looked like this:
<div class="col-xs-8">
<b>John Smith</b><br />
<i>Head of Widgets</i><br />
Google<br />
Maitland, FL<br />
123-456-7890<br />
<a
href="mailto:example#example.com"
>example#example.com</a
>
</div>
I wanted to extract the inner html of the div in the context of an "each" loop, so I used this code:
$(this).html()
Which returned
<b>John Smith</b><br />
<i>Head of Widgets</i><br />
Google<br />
Maitland, FL<br />
123-456-7890<br />
<a
href="mailto:example#example.com"
>example#example.com</a
>
Let's say I wrote a post like this on Blogger:
abc def ghi <div class="pls-exclude-from-snippet">jkl mno pqr stu vwxyz</div>
Instead of listing from a to z, I want Blogger to set its data:post.snippet to 'abc def ghi' only (letting Blogger know to stop if it reads the token: a div with class 'pls-exclude-from-snippet'). How do I do that?
I found help here https://productforums.google.com/forum/#!topic/blogger/X9LxrjXnb2s
Still have to tweak it a little, but it works. Think gonna post it to help people with similar problem as I had.
Here's my code. Before </head>, add:
<script type='text/javascript'>
//<![CDATA[
function stopIfFound(strx,token){
var theLocation = strx.indexOf(token);
if(theLocation!=-1){
strx = strx.substr(0,theLocation);
}
return strx;
}
function removeHtmlTag(strx, chop){
strx = stopIfFound(strx,'<div class="pls-exclude-from-snippet">');
if(strx.indexOf("<")!=-1){
var snippet = strx.split("<");
for(var i=0;i<snippet.length;i++){
if(snippet[i].indexOf(">")!=-1){
snippet[i] = snippet[i].substring(snippet[i].indexOf(">")+1,snippet[i].length);
}
}
strx = snippet.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = '<div class="snippets">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Find <data:post.snippet/>, in
<div class='post-body'>
<b:if cond='data:post.snippet'>
<data:post.snippet/>
</b:if>
</div>
replace it with
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet("summary<data:post.id/>");
</script>
You can try to limit the length of the characters.
Use this syntax:
<b:eval expr='snippet(data:post.body, {length: 150})' />
150 is the length. You can change it to any numbers you want.
Check my personal blog change snippet length on Blogger without Javascript to see more example.