I want to get the text of the next id (the text is: "Show More").
<div id="show_more_less" onclick="Show_More_Less();">Show more</p>
function Show_More_Less() {
var str = document.getElementById('show_more_less').text;
}
I tried: .value but it doesn't work.
To get the text of an element in a cross browser way, you can do this :
var e = document.getElementById('show_more_less');
var text = e.textContent || e.innerText;
Try innerHTML:
var str = document.getElementById('show_more_less').innerHTML;
Also you have an opening <div> tag and a closing </p> tag which is inconsistent. You probably meant:
<div id="show_more_less" onclick="Show_More_Less();">Show more</div>
Should make some checks to see if childNodes[0] exists and if it's a text node, but basically:
var str = document.getElementById('show_more_less').childNodes[0].nodeValue;
Related
I used below code to wrap <p> instead of <div>.
document.execCommand('defaultParagraphSeparator', false, 'p')
But I still can't wrap first line, like this "aaa".
<div id=“body-text” class=“body-text” contenteditable=“true” data-placeholder=“Body Contents">
aaa
<p>bbb</p>
<p>ccc</p>
</div>
Does anyone know how to wrap first line "aaa" with <p>?
postscript
I changed my cord using one of the answer for reference.
But now I cant type any letter. Only if I press enter first, it works. But after I press enter and make <p>, I cant type any letter again.
Where is the problem?
<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents' onkeydown={firstLine}></div>
<script>
firstLine(e) {
if(e.keyCode == '13') {
var div = document.getElementById('body-text')
var text = div.firstChild.textContents
div.removeChild(div.firstChild)
var p = document.createElement('p')
p.textContent = text
div.insertBefore(p, div.firstChild)
}
}
</script>
I'm using element.firstChild to select the "aaa" textNode, and creating the paragraph element which then gets prepended back into .body-text.
var pElement = document.createElement('p');
var bodyText = document.querySelector('.body-text');
var firstLine = bodyText.firstChild;
pElement.appendChild(firstLine);
bodyText.prepend(pElement);
console.log(bodyText.outerHTML)
<div class="body-text" contenteditable="true" data-placeholder="Body Contents">
aaa
<p>bbb</p>
<p>ccc</p>
</div>
note: you don't need a class and an ID... choose one
Ok, first I have to let you know that the code you provided was using those fancy quotes “ and ” you must use either this " or this '. Having said that, I have made a Snippet that uses formatBlock.
Highlight the text and click the button <p/>.
It can wrap text in a <p>, <div>, <blockquote>, <h1>, etc..
SNIPPET
<div id="body-text" class="body-text" contenteditable="true" data-placeholder="Body Contents">
aaa
<p>bbb</p>
<p>ccc</p>
</div>
<input type="button" class="p" onclick="document.execCommand('formatBlock', false, 'p')" value="<p/>" title="Insert a Paragraph Wrapped on Highlighted Text">
One way to do it is to get first text node of your div, save the text, remove that node and then create a p tag with the text from your ancient node and insert it in your div.
UPDATED
you had a little typpo problem var text = div.firstChild.textContents, there is no s it only var text = div.firstChild.textContent
see fiddle: https://jsfiddle.net/2rgLzkyj/
HTML :
<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'>
aaa
<p>bbb</p>
</div>
Javascript:
var div = document.getElementById('body-text')
div.addEventListener('keydown', onKeyDown);
function onKeyDown(e) {
if (e.keyCode == '13') {
var text = div.firstChild.textContent;
div.removeChild(div.firstChild);
var p = document.createElement('p');
p.textContent = text;
div.insertBefore(p, div.firstChild);
}
}
I want to extract the text part of the html.
If I have <p>ABCD</p>
I want the out put to be ABCD
Something like,
var html='<p>ABCD</p>';
var str = convertToString(html);
Hope, I will need a function which converts from html to string, or maybe extract string from it.
You can use jQuery to extract the text content from the string
var html = '<p>ABCD</p>';
var str = $(html).text();//get a jQuery reference and then read its text content
console.log(str)
All you need is a selector(id,class name etc) of get the required element of DOM and use .text() to get text part of the html.
HTML
<p>ABCD</p>
Jquery
var str = $('p').text(); // $('p') "p" is a selector to select p element(s)
console.log(str)
DEMO
JavaScript way
var txt = document.getElementById("demo").innerHTML;
alert(txt);
<p id="demo">Test text</p>
var html = '<p>ABCD</p>';
var str = $(html).text();
console.log(str);
This would do the task.
I'm looking for the Javascript to parse the following HTML:
<p>random text random text random text random text</p>
<kbd><h2>Heading One</h2>Body text Body text Body text Body text</kbd>
<p>random text random text random text random text</p>
... and return just:
Heading One
In other words, I'd like to strip all tags and Body Text from within the <kbd> tags.
Any ideas would be greatly appreciated!
var input = /* that HTML string here */;
var div = document.createElement('div');
div.innerHTML = input;
var h2 = div.getElementsByTagName('h2')[0];
var text = h2.innerText || h2.textContent;
alert(text); // alerts "Heading One"
Reference:
document.createElement
innerHTML
element.getElementsByTagName
Node.textContent (Quirksmode compatibility table)
Demo:
http://jsfiddle.net/mattball/vaVPF/
Regex?
var s = "<p>random text</p>\n" +
"<kbd><h2>Heading One</h2>Body text</kbd>\n" +
"<p>random text</p>";
s.match(/<h2>(.*?)<\/h2>/)[1] // == "Heading One"
This matches group one as the shortest possible (.*?) string between <h2>...</h2>.
You can find all matches using the g option.
s.match(/<h2>(.*?)<\/h2>/g) // == ["<h2>Heading One</h2>"]
Note that groups are not accessible.
For multiline content between tags, use
s.match(/<tag>[\s\S]*?<\/tag>/ig)
if you include jquery (jquery.com) you can do this:
var heading=$("h2").html();
HTML
<a href="#" id="popp" name="popo" class="tooltipLink">
<img src="images/information.png" alt="info" />
<span class="tipp"></span>
</a>
jQuery
var text = blah;
$('#popo span').text(text);
The text is not setting...I am doing something wrong..?
Typo and lack of quotes.. this will work:
var text = "blah";
$('#popp span').text(text);
First, by having this: var text = blah; you assigned the text as undefined variable and second you used the name instead of the ID of the anchor.
Your selector matches a span inside the element with the id 'popo', which does not exist (popp != popo).
You are trying to assign the value of text which is a copy of blah which is undefined
You probably meant:
var text = 'blah';
$('#popp span').text(text);
as seen in this live demo.
Things to notice:
blah is wrapped inside quotes as it represents a string
use #popp instead of #popo as id selector
$('#popp span.tipp').text(text);
Try this:
var text = "blah";
$('#popp span').text(text);
I have somewhere on website a specific text, let's say "lollypops", and I want to replace all the occurrences of this string with "marshmellows". The problem is that I don't know where exactly the text is. I know I could do something like:
$(body).html($(body).html().replace('lollypops', 'marshmellows'));
This would probably work, but I need to rewrite as little HTML as I can, so I'm thinking something like:
search for the string
find the closest parent element
rewrite only the closest parent element
replace this even in attributes, but not all, for example replace it in class, but not in src
In example, I would have structure like this
<body>
<div>
<div>
<p>
<h1>
<a>lollypops</a>
</h1>
</p>
<span>lollypops</span>
</div>
</div>
<p>
<span class="lollypops">Hello, World!</span>
<img src="/lollypops.jpg" alt="Cool image" />
</p>
<body>
In this example, every occurrence of "lollypops" would be replaced, only <img src="... would remain the same and the only elements that would actually be manipulated would be <a> and both <span>s.
Does anybody know how to do this?
You could do something like this:
$("span, p").each(function() {
var text = $(this).text();
text = text.replace("lollypops", "marshmellows");
$(this).text(text);
});
It will be better to mark all tags with text that needs to be examined with a suitable class name.
Also, this may have performance issues. jQuery or javascript in general aren't really suitable for this kind of operations. You are better off doing it server side.
You could do something this way:
$(document.body).find('*').each(function() {
if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
$(this).removeClass('lollypops');
$(this).addClass('marshmellows');
}
var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
var text = $(this).text(); //getting just current node text
text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
$(this).text(text); //setting text
$(this).append(tmp); //re-append 'foundlings'
});
example: http://jsfiddle.net/steweb/MhQZD/
You could do something like this:
HTML
<div class="element">
<span>Hi, I am Murtaza</span>
</div>
jQuery
$(".element span").text(function(index, text) {
return text.replace('am', 'am not');
});
Below is the code I used to replace some text, with colored text. It's simple, took the text and replace it within an HTML tag. It works for each words in that class tags.
$('.hightlight').each(function(){
//highlight_words('going', this);
var high = 'going';
high = high.replace(/\W/g, '');
var str = high.split(" ");
var text = $(this).text();
text = text.replace(str, "<span style='color: blue'>"+str+"</span>");
$(this).html(text);
});
var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);
Why you just don't add a class to the string container and then replace the inner text ? Just like in this example.
HTML:
<div>
<div>
<p>
<h1>
<a class="swapText">lollipops</a>
</h1>
</p>
<span class="swapText">lollipops</span>
</div>
</div>
<p>
<span class="lollipops">Hello, World!</span>
<img src="/lollipops.jpg" alt="Cool image" />
</p>
jQuery:
$(document).ready(function() {
$('.swapText').text("marshmallows");
});